Autocomplete closes on scrollbar click

1

Hello,

Hope you are having a good day. I’ve found a strange behaviour where if the code editor is a descendent of another element with tabindex=“-1” then the autocomplete popup cannot be scrolled with the scrollbar. As soon as you click the scrollbar in the autocomplete popup it closes. It seems that setting the tabindex on the popup element to “0” resolves this bug, is there any chance you could take a look and if so, do you know when a new version might be available that would have a fix for this in?

I have the minimum reproducible code here:
https://codesandbox.io/p/sandbox/react-16-8-forked-7fkmg4?file=%2Fsrc%2Findex.js%3A46%2C24

If you remove any of the 'a’s from the existing select statement, then add a back in the autcomplete should show up and then when you try clicking the scrollbar to scroll with it, the popup will close. You can also test adding any number of elements between the original tabindex=“-1” parent and the editor with any range of tab indexes, the behaviour seems to be the same.

Many thanks in advance for your time,
Pete

2

Making the tooltip focusable still has the issue of moving focus out of the editor when you interact with it. It seems calling preventDefault on mousedown events also gets rid of the focus change behavior, as implemented in this patch.

1 Like
3

@marijn Brilliant as always thank you, I’ve updated our dependencies and the issue has been resolved.