Control opening direction up/down about react-autocomplete HOT 5 CLOSED

+1. And it would be cool to have a sort of "auto" mode which opens the menu in the direction where enough space is available. Having the component near the lower border of the viewport can result in a only partial visible menu.

from react-autocomplete.

+1

from react-autocomplete.

Please!
p.s. is there a way of doing it in jQuery before that happens? help!

from react-autocomplete.

Hi everyone!

You have full control over the menu's styles, so making it render on top instead of at the bottom is as simple as specifying bottom: 0; margin-bottom: -20px; (replace -20px with the height of the <input> element). If you want a more intelligent positioning logic I suggest using a lib/util such as Popper.js. Here's an example of how it could look: https://codesandbox.io/s/kxmmym9mz3 (resize the window vertically to see the menu flip when there's not enough space below, props.open is used to force the menu to stay open)

There probably won't every be support for this in Autocomplete, as we don't really want to have responsibility for things such as positioning and style.

Hope this helps!

from react-autocomplete.

Hi @CMTegner I followed your example with Popperjs, everything work fine but the component is not displayed and this also happens in your example if you add <Arrow className="popper__arrow" /> as a child of Popper component. Any idea?

Mirko

from react-autocomplete.