Сould it behavior of latest Chrome be because of the OverlayScrollabars?

[krutoo]

Hi, first of all thanks for the great library. Today we noticed that in latest Chrome our PhoneInput component has broken:

Click in dropdown menu now is not changed mask

Here is an example:
https://sima-land.github.io/ui-nucleons/?path=/components/phone-input/01-primary

My question is: may it be because of OverlayScrollbars and our integration of this library?

In our library (https://github.com/sima-land/ui-nucleons) we use tabindex for dropdown element:
https://github.com/sima-land/ui-nucleons/blob/master/src/select/parts/menu.tsx#L107

If we removes tabindex here it works correctly but keyboard behavoir breaks.

I haven't fully figured out the problem yet, but I asked the question in advance, sorry if it's not related to this library

[krutoo]

Looks like it is new feature of Chrome
https://developer.chrome.com/blog/keyboard-focusable-scrollers?hl=ru

[KingSora]

@krutoo I'm not sure what the exact issue is there, but chrome has aligned with firefox in this case.

Previously calling .focus() on an scrollable element which had no tabIndex would never shift the focus to that elment in chrome. In firefox the element would gain the focus even without any tabIndex, because it is scrollable.

OverlayScrollbars is calling .focus() on its viewport element in certain cases... It seems like your dropdown is working with focus events and because of this behavior change you might receive more / less of those events than before.

[krutoo]

It is new Chrome 127 "feature" that makes scrollable elements focusable

See the difference between chrome 127 & for example firefox here:
https://codepen.io/dmtr_ptrv/pen/vYqRBJK

This example shows that focused element blurs when child scrollable elements clicked