Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Blur event fired when clicking on focused input checkbox #4356

Open
CYBAI opened this issue Feb 11, 2019 · 2 comments
Open

Blur event fired when clicking on focused input checkbox #4356

CYBAI opened this issue Feb 11, 2019 · 2 comments
Labels
interop Implementations are not interoperable with each other topic: focus topic: forms

Comments

@CYBAI
Copy link
Contributor

CYBAI commented Feb 11, 2019

There's a filed bugzilla.

While investigating react-bootstrap-table/react-bootstrap-table2#521, I found a small test case as https://jsbin.com/cuwoyuyegu/edit?html,js,console,output.

How to reproduce:

1. Click the "Run with JS"
2. The checkbox should be focused
3. Click the checkbox

In Firefox and Safari, it will fire blur and then click event.
In Chrome, it will only fire click event.

According to Olli mentioned in the bugzilla, Firefox just follows the Mac specific focus handling.
So, I'm guessing Webkit handles in the same way.

As @annevk said, currently, there's no spec related to this behavior that we should follow platform convention.

Maybe we should update the spec to describe about this? Or, should we have define a specific behavior for it?
@domenic domenic added topic: forms interop Implementations are not interoperable with each other labels Feb 11, 2019
@rniwa
Copy link

rniwa commented Feb 13, 2019

On macOS, form controls are not focusable. See https://html.spec.whatwg.org/#focusable-area

The last row in the table which says: "[a]ny other element or part of an element, especially to aid with accessibility or to better match platform conventions" does not include form controls on macOS.

@CYBAI CYBAI mentioned this issue Jul 19, 2019
Closed
msssk added a commit to msssk/dgrid that referenced this issue Apr 25, 2020
@msssk
Editor: wrap checkbox and radio button shared editors on Mac
1a8decd 
In OS X form controls are not considered focusable elements. Some browsers
(Safari, Firefox) adopt this decision:
whatwg/html#4356
https://bugzilla.mozilla.org/show_bug.cgi?id=1524863
https://bugs.webkit.org/show_bug.cgi?id=22261
The resulting implementation is broken - you can call `focus()` on a checkbox
and it will be focused, but clicking on a checkbox does not focus it. Further,
clicking on a focused checkbox blurs it. To overcome these challenges
checkboxes and radios are wrapped in a div that can receive focus (and blur)
in a consistent manner.

Fixes SitePen#1458
@msssk msssk mentioned this issue Apr 25, 2020
Merged
msssk added a commit to SitePen/dgrid that referenced this issue Apr 27, 2020
@msssk
Fix checkbox/radio shared editor on Mac (#1459)
d8d2a16 
Editor: wrap checkbox and radio button shared editors on Mac

In OS X form controls are not considered focusable elements. Some browsers
(Safari, Firefox) adopt this decision:
whatwg/html#4356
https://bugzilla.mozilla.org/show_bug.cgi?id=1524863
https://bugs.webkit.org/show_bug.cgi?id=22261
The resulting implementation is broken - you can call `focus()` on a checkbox
and it will be focused, but clicking on a checkbox does not focus it. Further,
clicking on a focused checkbox blurs it. To overcome these challenges
checkboxes and radios are wrapped in a div that can receive focus (and blur)
in a consistent manner.

Fixes #1458
msssk added a commit to SitePen/dgrid that referenced this issue Apr 28, 2020
@msssk
Fix checkbox/radio shared editor on Mac (#1459)
e258b17 
Editor: wrap checkbox and radio button shared editors on Mac

In OS X form controls are not considered focusable elements. Some browsers
(Safari, Firefox) adopt this decision:
whatwg/html#4356
https://bugzilla.mozilla.org/show_bug.cgi?id=1524863
https://bugs.webkit.org/show_bug.cgi?id=22261
The resulting implementation is broken - you can call `focus()` on a checkbox
and it will be focused, but clicking on a checkbox does not focus it. Further,
clicking on a focused checkbox blurs it. To overcome these challenges
checkboxes and radios are wrapped in a div that can receive focus (and blur)
in a consistent manner.

Fixes #1458
msssk added a commit to SitePen/dgrid that referenced this issue Apr 28, 2020
@msssk
Editor: wrap checkbox and radio button shared editors on Mac
65aad0b 
In OS X form controls are not considered focusable elements. Some browsers
(Safari, Firefox) adopt this decision:
whatwg/html#4356
https://bugzilla.mozilla.org/show_bug.cgi?id=1524863
https://bugs.webkit.org/show_bug.cgi?id=22261
The resulting implementation is broken - you can call `focus()` on a checkbox
and it will be focused, but clicking on a checkbox does not focus it. Further,
clicking on a focused checkbox blurs it. To overcome these challenges
checkboxes and radios are wrapped in a div that can receive focus (and blur)
in a consistent manner.

Fixes #1458
@whatwg whatwg deleted a comment from 6247316886 Mar 27, 2022
@maurer2
Copy link

maurer2 commented Jun 30, 2024 •
edited
Loading

Hello, I seem to be getting different results in the latest version of MacOS. Chrome and Firefox only fire the click event, when clicking the focused checkbox. No blur event is fired after the checkbox has received focused and is clicked. Perhaps something has changed in MacOS?

Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
interop Implementations are not interoperable with each other topic: focus topic: forms
Milestone
No milestone
Development

No branches or pull requests
4 participants
@rniwa @domenic @CYBAI @maurer2