Bug 239524 – Clicking on Overflow scrollbar blurs current activeElement

• Component: UI Events
• Status: NEW

So on the surface it looks like a duplicate of BUG 96335. But not sure if different because the scroll bar I am referring to is the scrollbar from overflow containers. There is some mention of that distinction at the bottom of that bug ticket.

Otherwise the issue is the same. 

Have focus on an input. Then have another container div with overflow auto. When that container had too many items like a list, it will create a scroll bar. Now click in the scroll bar that appears. The input will lose focus (fire a blur event).

The practical use case is a typeahead or search.

It is important to note that the latest Chromium/Chrome does Not fire a blur event and focus remains on the input.

Here is my simple Codepen demo:
https://codepen.io/camario25/pen/wvpRNwo

You can try it with Latest Safari/ Safari Technology Preview and with Latest Chrome.

The inconsistent behavior between browsers for this is causing some problems. I can see from Bug 96335 that consistency between browsers is a goal and that Not removing focus from the input is the preferred behavior.

I believe this behavior is impacting major websites, I have simplified it to the most basic of examples.


Thank you.

[Simon Fraser (smfr)]

Can you give an example of a major website that this impacts?

Created attachment 458321 [details]
TypeAhead example in Safari Sales Navigator from LinkedIn

Clicking on lower part of scroll bar caused blur event.

Created attachment 458322 [details]
TypeAhead example in Chrome, Sales Navigator from LinkedIn

Clicking on lower part of scroll bar does Not cause blur event.

[Simon Fraser (smfr)]

Thanks for the example.

Thank you too for looking into this.

[Radar WebKit Bug Importer]

<rdar://problem/92367314>

Hello, Just checking here for an update on this. Does it look like it will be worked on eventually or should I not expect that to happen? This so I can update or close my own work tickets...

Thank you!