Handle dropdown to open according to screen view in React

I’m in a scenario where I need math to solve this height and direction issue for dropdown in my app. Its a grid and dropdown can be at any location on the screen. (don’t bother about grid) Just take it as, the dropdown can be at any location vertically.

To explain better here are few use cases, before I share code:

1- Dropdown can have any number of options (text single lines).
2- When I open it should show full length according to available screen height
3- When it cannot show all options, it should show scrollbar
4- when there is no space (vertically) at below side, the dropdown should open at upper side but should be within view port with scrollbar.

I almost achieved it, but unable to handle it without giving it a max-height.

Here is my code now: ( I am doing it in React but JS solution is also welcomed).

React.useLayoutEffect(() => {
const wrapperEl = containerRef.current;
const optionsPanel = optionsPanelRef.current;

if (wrapperEl != null && optionsPanel != null) {
  const innerHeight = window.innerHeight;
  console.log("innerHeight", innerHeight)

  const xx = (optionsPanel as HTMLElement).getBoundingClientRect().height + 20;
  const elementHeight =  (wrapperEl as HTMLElement).getBoundingClientRect().height;
  const bottomPosition = (wrapperEl as HTMLElement).getBoundingClientRect().bottom;
  

  const isWithinViewport = bottomPosition <= innerHeight;
  const isWithinBoundary = innerHeight - bottomPosition <= BOUNDING_HEIGHT;
  console.log("isWithinBoundary", isWithinBoundary, isWithinViewport, bottomPosition, elementHeight, optionsPanelHeight)

  const x = innerHeight - bottomPosition < 300;
  
  const shouldRepositionDropdown = (innerHeight - bottomPosition) < optionsPanelHeight;
  toggleDropdownReposition(shouldRepositionDropdown);
  setoptionsPanelHeight (xx);
}

});

TSX

 <div
    className={`${titleClasses.join(' ')}`}
    data-id={`${props.dataIdPrefix}-dropdown-title`}
    onClick={toggleList}
    ref={containerRef}
  >

    <span className="grid-dd-headerText">{headerTitle}</span>
    <span className="grid-dd-separator">|</span>
    <span><Icon dataIdPrefix="grid-dd-ind" className="dropdown-indicator fa-chevron-down" /></span>
  </div>
  {isListOpen ? (
    // <div className={'grid-dd-list-container ' + (repositionDropdown ? 'grid-dd-options-transform' : '')}>
    <div className={'grid-dd-list-container'} ref={optionsPanelRef} style={ repositionDropdown ? {transform: `translate(0px, ${'-'+optionsPanelHeight}px)`} : {transform: 'none'}}>
      <ul
        className="grid-dd-list"
        data-id={`${props.dataIdPrefix}-select`}
        onClick={e => e.stopPropagation()}
      >
        {props.items.map((opt, i) => (
          <li
            key={opt.value}
            className={`${liClasses.join(' ')}`}
            onClick={() => selectItem(opt)}
            data-id={`${props.dataIdPrefix}-option-${opt.value}`}
            title={opt.value}
          >
            {opt.label}
          </li>
        ))
      }
      </ul>
    </div>
  ) : null}
</div>

Refer to the element with className grid-dd-list-container.

You can ignore the other code. But its straight.

Thanks guys!