Bug 229895 - Clicking button drops focus entirely
Summary: Clicking button drops focus entirely
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari 14
Hardware: Mac (Apple Silicon) macOS 11
: P2 Normal
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2021-09-03 14:05 PDT by Andy Blum
Modified: 2021-09-09 13:53 PDT (History)
12 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Andy Blum 2021-09-03 14:05:36 PDT
Spin off issue from #22261 (https://bugs.webkit.org/show_bug.cgi?id=22261#c82)

In that issue, the maintainers assert:

> Mac users expect the focus to remain in the text field if you click on a button. That’s what happens everywhere else on their computer in all the Mac applications. It’s a benefit that buttons work as expected, consistent with other buttons on the Mac, and don't pull the focus away from the text field you are already typing in.

That does not appear to happen in Safari. I've made a codepen to hopefully illustrate my point: https://codepen.io/andy-blum/pen/ExXgxWO

Clicking into a text input raises the following events:
- mousedown 
- focus
- focusin
- mouseup
- click

Then, clicking into a directly adjacent button:
- mousedown (button)
- blur      (input)
- focusout  (input)
- mouseup   (button)
- click     (button)

After clickign the button, where is the focus? The tabbing order is maintained, but the focus leaves both the input and button. document.activeElement is the page's body, but I'm pretty sure that's the default when the focusoutEvent.relatedTarget == null.

The reason I came across this bug recently was an issue for a search component listening for focusout events to close the type-ahead suggestions. Clicking the search button on this form closes the results and interrupts the submission of the form because the entire component loses focus before the button can even be clicked.
Comment 1 Darin Adler 2021-09-03 14:23:15 PDT
It’s possible that this behavior was required to make websites work--may require some research to find out.

But pulling focus away when you push a button, something that does not happen on Mac outside web browsers, dilutes the value of macOS WebKit sticking with focus behavior that matches the rest of the Mac platform.

Would be good to fix this.

Or we may find that as requested in bug 22261 we should just go full-Windows-style-focus even on Mac as many other browsers did.
Comment 2 Manuel Rego Casasnovas 2021-09-06 08:10:01 PDT
Regarding this topic, and as part of the discussion around :focus-visible and WebKit [*], there was an idea to give web authors the possibility to mark an element as non-focusable (in order to mimic Mac's behavior):
> For authors who want a control that participates in the tab focus cycle, but without drawing a focus ring on tap or click, [a better solution may be] to give them a way to make elements keyboard-focusable but not mouse-focusable. I don’t think there’s any support in the web platform for that, although the opposite is possible with tabindex="-1".

[*] https://github.com/WICG/focus-visible/issues/257#issue-894585219
Comment 3 Radar WebKit Bug Importer 2021-09-09 13:53:40 PDT