First input in popup autofocuses

[qubal]

Greetings, traveller. Currently I'm facing a bug, which can shortly be described like: "First input in any popup autofocuses and neither "tabIndex: -1", nor "autofocus={'false'}" can help fixing it.

Version

2.0.4

Test Case

https://codesandbox.io/s/restless-shape-n5o0k?file=/src/index.tsx

Expected Behavior

I expect first input not to focus, i've already tried changing tabIndex and set autofocus false.

Actual Behavior

It, unexpectedly (wow!) autofocuses.

What can I do to fix it?

[RaphaelChauveau]

Hello, It seems to be the intended behaviour, for accessibility purpose.

Extract from https://react-popup.elazizi.com/react-popup-accessibility

✓ On Popup Open, we set focus to the first focusable element.
✓ On Popup Close, we return focus to the last focused element.

However, this feature is also causing some problems for me because despite restoring the first focused element on close, it loses the original selection...

[ronangaillard]

Yes, please add an optional prop to disable this 😞

[qubal]

@ronangaillard @RaphaelChauveau admit

[abdulsami822]

Use a dummy input field like radio button without content as first input in form and make it "display:none" in css. Then the focus goes to that element instead of the first visible input.

[ronangaillard]

The problem is that the current focused element before opening gets unfocused on popup open.

In our projects this is a big issue as we have to refocus the previous focused element after opening popup.

[charlesrollin]

I have the same issue as @ronangaillard. I use a popup as the container for suggestions list on a search input. On first click on the search input, the following occurs :

• text input is focused
• then popup opens (with no suggestions and an initial loader)
• then text input looses focus (because focus goes to the first item in the popup)

In terms of UX it means that the user has to click twice to effectively focus the text input at first !
I managed to find a messy fix using a controlled popup and a useEffect but adding a prop that allows to disable autofocus would be great !

[taj567]

Guy's me to has same bug,can anyone has solution to stop auto focus.

[ronangaillard]

Any update on this issue ?
Do you have tips of where to look to make a PR ?

[nikitadubyk]

I fixed this problem and open PR, hope it will be merged soon
#346