How to determine dropdown should show upward or downward direction

Question

I tried to design a dropdown component.

So far I faced an issue that the dropdown list is too long, so I keen to display it as the upward direction. I know Bootstrap has the same feature, but I want to do it my own. Any suggestions or keywords?

Thank you

UPDATE:

I don't use any library. Just refer the Bootstrap has achieved the purpose. These pictures are just examples

Answer 1

Here is what Bootstrap did, they were checking if the dropdown-menu height is less than the rest of the screen. Below is what I did.

let style = 'bottom';
let element = document.getElementById('myId');
if (window.innerHeight - element.getBoundingClientRect().bottom < element.scrollHeight){
     style = 'top'
}