Bug 239524

Summary:

Clicking on Overflow scrollbar blurs current activeElement

Product:

WebKit

Reporter:

mariomystic25

Component:

UI Events

Assignee:

Nobody <webkit-unassigned>

Status:

NEW ---

Severity:

Normal

CC:

cdumez, simon.fraser, webkit-bug-importer, wenson_hsieh

Priority:

Keywords:

BrowserCompat, InRadar

Version:

Safari Technology Preview

Hardware:

Mac (Intel)

OS:

macOS 12

See Also:

https://bugs.webkit.org/show_bug.cgi?id=96335

Attachments:

Description	Flags
TypeAhead example in Safari Sales Navigator from LinkedIn	none
TypeAhead example in Chrome, Sales Navigator from LinkedIn	none

Description mariomystic25 2022-04-19 17:03:06 PDT

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.

Comment 1 Simon Fraser (smfr) 2022-04-25 12:06:09 PDT

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

Comment 2 mariomystic25 2022-04-25 19:00:51 PDT

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

Clicking on lower part of scroll bar caused blur event.

Comment 3 mariomystic25 2022-04-25 19:02:04 PDT

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

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

Comment 4 Simon Fraser (smfr) 2022-04-25 19:43:34 PDT

Thanks for the example.

Comment 5 mariomystic25 2022-04-26 15:40:24 PDT

Thank you too for looking into this.

Comment 6 Radar WebKit Bug Importer 2022-04-26 17:04:15 PDT

<rdar://problem/92367314>

Comment 7 mariomystic25 2022-07-11 16:58:07 PDT

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!