Dropdown list in modal window

[Dashevskyi]

Hello

I'm set Autocomplete component in main window and all work good, but when i set in modal window (mdb), dropdownlist place not under input. Can help me ?

thanks

[leoparis89]

having the same problem... Have you found a way to solve this ? help much appreciated

[leoparis89]

Found a workaround: Set position to absolute for menuStyle and 'relative' for wrapperStyle. Then you have to ajust the top property according to the height of your input box

   wrapperStyle={{
          position: 'relative'
        }}

        menuStyle={{
          top: // dependent of the height of your input
          left: 0,
          position: 'absolute'
        }}

[Torvin]

The original algorithm is using getBoundingClientRect(), ignoring the fact that the menu and the input could belong to different offset parents. I came up with the following workaround:

function fixMenuPosition(autocomplete: ReactAutocomplete | null, style: CSSProperties) {
   if (!autocomplete) { return style }

   let node = autocomplete.refs.input as HTMLElement;
   const menu = autocomplete.refs.menu as HTMLElement;
   if (!node || !menu) { return style }

   let { left, top } = style;
   if (typeof left !== 'number' || typeof top !== 'number') { return style }

   // undo the original positioning, but keep the margins
   const rect = node.getBoundingClientRect();
   left -= rect.left;
   top -= rect.top;

   // go up the child tree until both children belong to the same offset parent
   for (;;) {
      left += node.offsetLeft;
      top += node.offsetTop;

      const parent = node.offsetParent;
      if (parent === menu.offsetParent) {
         break;
      }

      if (!(parent instanceof HTMLElement)) { return style }
      node = parent;
   }

   return { ...style, left, top };
}

It assumes that menu and input have a common offset parent somewhere up the tree, which should be the case unless you did something crazy like rendering your input into a portal. Example of usage:

<Autocomplete ref={this.autoCompleteRef} renderMenu={renderMenu} .... />
...
function renderMenu(items: any, value: string, style: React.CSSProperties) {
   return <div style={fixMenuPosition(this.autoCompleteRef.current, style)} ... />
}

@CMTegner @ryanflorence can we please fix that so we don't have to use hacky workarounds?

[FacundoGFlores]

Solution from @leoparis89 worked as a charm