How to fix behevior after upgrade from 2.4.3 to 2.8.0?

[krutoo]

Hi, in my case i have dropdown menu for custom select component.

When menu is opened it gets focus. In my implementation it is needed because of keyboard movement.

When menu element dispatches blur event it goes to unmount.

After I upgrade overlayscrollbars to 2.8.0 my select has broken.

How can I fix behavior without changing my component work algorithm?

[KingSora]

Good day @krutoo :)

Can you please create an small example? Its hard for me to give any directions without having an example

[KingSora]

@krutoo I've created an example of how I believe your example looks like: https://stackblitz.com/edit/vitejs-vite-d6615r you can use it to adapt it to your actual code

[krutoo]

@KingSora here is an example of my issue: https://github.com/krutoo/overlayscrollbars-select-regress

You can downgrade overlayscrollbars to 2.4.3 and see that both implementation of Select works

But with latest version it is not working: try to select option from menu by click

Is it possible to fix that behavior without modification of Select algorithm?

PS i disabled hmr, you need to update page when you make changes or enable hmr but in rsbuild it works with bugs (or enable liveReload: true)

[KingSora]

@krutoo For me it doesn't seem to work with either v2.4.3 or v2.8.0. I managed to make it work with both version by adding the following event to the OverlayScrollbarsComponent :

<OverlayScrollbarsComponent
  events={{
    initialized(instance) {
      instance.elements().viewport.removeAttribute('tabindex');
    },
  }}
/>

[krutoo]

@KingSora I updated repo, now (testsed) it works only with older versions

    "overlayscrollbars": "2.4.3",
    "overlayscrollbars-react": "0.5.3",

And not working with latest

[krutoo]

@KingSora your solution is works thanks but it is a little tricky, maybe is there an other solution for case when i need tabIndex on viewport element?

[KingSora]

@krutoo this whole topic is a little bit complicated and the worst part is that there is no clear spec in place.

Between version v2.4.3 and v2.8.0 I've done improvements to accessibility. One improvement is that if you use your mouse to scroll via dragging the scrollbar, you'll be also able to scroll with the keyboard afterwards. This has been done to shift the focus to the viewport element. The problem here is, that the viewport element is not focusable via element.focus() if it has no tabindex in place. To fix this I'm either assigning the tabindex of the target element to the viewport element or if the target element has no tabindex the viewport will have an tabindex of -1.

This makes everything work without the side effect of the viewportbeeing focusable with the tab keys. The problem here is that if you now click on anything in the viewport the viewport itself will receive the focus (which would not happen if the viewport has no tabindex). This is also the regression you're seeing, if any div in the viewport is clicked, the viewport receives the focus and your originally focused element is getting blurred.

So removing the tabindex attribute from the viewport element is in fact how the library behaved in v2.4.3.

There is another "fix" to this whole problem, but it would require that the viewport element is the menu element at the same time. This would mean that clicking in the viewport would not shift the focus, because the viewport is the focused element from the beginning.
If you would be interested in this fix, please let me know.. I can create an example for you

[krutoo]

@KingSora Thank you a lot for detailed explanation, i think i will use your first solution if it equals to previous version behavior