search

reactjs / react-autocomplete

WAI-ARIA compliant React autocomplete (combobox) component
MIT License
2.17k stars 532 forks source link

Usage of a react-autocomplete inside of a container with overflow:scroll #235

Closed stefan-spittank closed 7 years ago

stefan-spittank commented 7 years ago

Using the autocomplete component inside of a container with overflow:scroll produces undesired behaviour: ideally the popup should just go outside of the container but instead the container will get scrollbar and the popup is initially hidden (or at least partially hiddden).

This is not really a problem specific to react-autocomplete but a more general problem with absolute positioned elements inside of an overflow container: http://wiki.orbeon.com/forms/doc/contributor-guide/browser#TOC-Absolutely-positioned-box-inside-a-box-with-overflow:-auto-or-hidden

However for (as a react novice) I find it hard to find a react-like solution. Possible solutions:

Position the autocomplete suggestions with position fixed instead of absolute This fixes the scrollbar issue, however the container needs to be "manually" positioned. Doesn't feel very "reacty".

Position the autocomplete suggestions container with position absolute instead of relative Again, this fixes the scrollbar issue. But now the parent needs to be "manually" positioned.

Render the popup not in the dom position of the autocomplete parent, but to a parent position (e.g. the body) In the past (pre react) I've worked with a similar component for bootstrap (bootstrap-select). With this component it was possible to give the popup a specific parent element selector. This is not an option with react-autocomplete and I wonder if this would even be possible in react?

CMTegner commented 7 years ago

Render the popup not in the dom position of the autocomplete parent, but to a parent position (e.g. the body)

There is a way of achieving this in React. The way it's usually done is to create a new React root under document.body, then render into that. This is what react-bootstrap does with most of their popups (dropdowns, overlays, etc). Read the source code of OverlayTrigger if you're curious as to how it's done.

As for how this all works with Autcomplete: While it would be nice to offer this feature, it's not something we currently have on the roadmap. At the moment you can solve most situations by using positioning and z-index.

I'm closing this for now, but please let us know if you have a strong case for this feature to be included.