Cannot Click Option from Dropdown if Form Field is Outside Window

[darrindickey]

I've noticed that if the select option dropdown scrolls down so that the form field is outside of the visible window, the user can no longer select one of the options. Clicking will reposition the form field into the window, and THEN the selection can be made.

An example of this can be seen on the Managed Menu Visibility example at https://reactcommunity.org/react-autocomplete/managed-menu-visibility/. If you click in the form field (and don't type anything) a dropdown listing US states shows up. Scroll down the list to Virginia (or anywhere so the form field is no longer visible) and click. The selection isn't added to the field. Instead, the field is repositioned in the window and a second click must be performed to add the selection to the form field.

Is this on purpose? Is there a way to turn it off?

[CMTegner]

Hi Darrin! This is definitely not working as intended. It's actually due to to a chain of events that isn't at all obvious. When you click on an item the <input> triggers a blur action. We have logic in place which counteracts this, since we want to preserve the focus as long as the user is interacting with Autcomplete. To counteract it, we simply reset focus when it's lost.

When you focus a focusable control that's outside the view-port, the browser will alter the scroll position so the control comes into view. This is expected, and is an important part of how navigating with a keyboard works. Unfortunately this also means that the x,y offset of the cursor may change quite a bit on its next movement. This is the cause of the problem you highlighted.

Here's the chain of actions:

1. User clicks input, focus is set
2. User scrolls the page while looking for an item to select, the <input> disappears outside the view-port
3. User hovers over item, setting a state variable in Autocomplete which highlights the item at that specific index
4. User clicks the item, causing a blur event to happen
5. Autcomplete immediately resets focus, causing the page to scroll up so the <input> is once again visible in the view-port
6. If the user has managed to keep the cursor completely still, the item will be selected as expected, if not, step 3 will happen again, causing a re-render, which aborts the remaining events

The solution was to delay resetting focus until after the chain of actions had completed (cf13fb3). Please give 1.5.4 a try and see if solves the problem.

Thanks for letting us know!

[CMTegner]

Just a heads-up to anyone still subscribing to this issue: I just reworked the focus management (released in 1.5.9), so if you start seeing a regression to this fix, or anything else unexpected, please let me know!

[gilbertorconde]

I dont know if I did something wrong even because I did not dedicate much time to this. But I has had a behavior very much like the one described with version 1.5.9. When changing to 1.5.5 this stopped giving problems.

[CMTegner]

Hi Gilberto! Please open a new issue and describe the issue as best you can. Remember to include browser/OS version, and a reduced test case to help debugging. Thanks!