Long option causes menu to open in wrong position

[Vikciux]

Version

6.0.2

Steps to reproduce

1. Go to https://codesandbox.io/s/react-typeahead-bug-with-long-labels-ix81kd
2. open typeahead menu
3. notice that menu is shifted to the left edge of the view
4. start scrolling options and notice that menu position fixes itself

Expected Behavior

Menu is aligned with input when opened.

Actual Behavior

Menu is shifted to the left edge of the view once opened. Menu position gets fixed once you start scrolling.

I can reproduce it with Chrome and FF.

[ericgio]

Hey @Vikciux thanks for the report and the sandbox reproducing the issue. It looks like the issue reproduces even without a long menu item label if you make the window narrower and try to re-open the menu. Seems like the popper might be getting stale reference element dimensions or something.

[Vikciux]

Thanks for the great component! Providing a comprehensive report is the least I can do.

Any idea when we can expect a fix?

[ericgio]

@Vikciux I don't have a timeframe for a fix at the moment. If you'd like to spend some time pinpointing the issue or even submitting a fix, that'd be helpful :)

[mistahoward]

I was having a lot of issues getting typeahead to build locally for me to test and debug. Looks like popper dropdown menu inset isn't set correctly. If you modify the inline css for inset-right to auto on the dropdown menu, it's correctly aligned. YMMV.