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/issues/4356
https://bugzilla.mozilla.org/show_bug.cgi?id=1524863https://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. Without the wrapper a valid blur is indistinguishable from an invalid blur. With the wrapper the blur event's target and relatedTarget enable reliably identifying invalid blurs and ignoring them.
Notes
This PR changes the way Dijit widget events are monitored - instead of using widget events, the DOM events are used directly. Widget events are not useful in this situation since they pass no event object; event.target and event.relatedTarget are crucial for this solution. In testing with dijit/form/CheckBox and dijit/form/RadioButton functionality remains the same.
Previously, cmp.focus() would either call HTMLInputElement#focus or a widget's focus method, with this PR the widget's focusNode is used, so HTMLInputElement#focus is always called
Previously, on.pausable(cmp, 'blur', onblur) would listen for a widget's blur event if cmp was a widget. With this PR a listener for blur is registered directly on the widget's focusNode.
As of April 2020, out of testing Chrome, Firefox, and Safari on OS X, the broken behavior has only been observed in Firefox and Safari. However, at the core the problem is an issue with OS X's decision on which form controls are focusable elements, so the fix is being applied if has('mac') is true (1, 2) without further detection of which browser. The fix is unnecessary in unaffected browsers, but in testing works fine.
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/issues/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. Without the wrapper a valid blur is indistinguishable from an invalid blur. With the wrapper the blur event'starget
andrelatedTarget
enable reliably identifying invalid blurs and ignoring them.Notes
event
object;event.target
andevent.relatedTarget
are crucial for this solution. In testing withdijit/form/CheckBox
anddijit/form/RadioButton
functionality remains the same.cmp.focus()
would either callHTMLInputElement#focus
or a widget'sfocus
method, with this PR the widget'sfocusNode
is used, soHTMLInputElement#focus
is always calledon.pausable(cmp, 'blur', onblur)
would listen for a widget'sblur
event ifcmp
was a widget. With this PR a listener forblur
is registered directly on the widget'sfocusNode
.has('mac')
is true (1, 2) without further detection of which browser. The fix is unnecessary in unaffected browsers, but in testing works fine.Fixes #1458