reactjs-popup First input in popup autofocuses

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?

Apr 02 '21 18:04 qubal

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...

Apr 07 '21 17:04 RaphaelChauveau

Yes, please add an optional prop to disable this 😞

Apr 13 '21 12:04 ronangaillard

@ronangaillard @RaphaelChauveau admit

Apr 15 '21 07:04 qubal

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.

May 10 '21 14:05 abdulsami822

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.

Aug 24 '21 13:08 ronangaillard

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 !