Bug 149398 - <input> of type=checkbox,radio,file doesn't fire `input` events
Summary: <input> of type=checkbox,radio,file doesn't fire `input` events
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: WebKit Nightly Build
Hardware: Mac OS X 10.11
: P2 Normal
Assignee: Nobody
URL: http://jsbin.com/jojoji/edit?html,output
Keywords: HasReduction, InRadar
Depends on:
Reported: 2015-09-21 01:41 PDT by Chris Rebert
Modified: 2020-05-05 05:57 PDT (History)
8 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Chris Rebert 2015-09-21 01:41:54 PDT
Per the following portions of the HTML specification:
* https://html.spec.whatwg.org/multipage/forms.html#checkbox-state-(type=checkbox):event-input-input
* https://html.spec.whatwg.org/multipage/forms.html#radio-button-state-(type=radio):event-input-input
* https://html.spec.whatwg.org/multipage/forms.html#file-upload-state-(type=file):event-input-input

when the user changes the checkedness of an <input type="checkbox"> or <input type="radio">, or when a user changes the selected files of an <input type="file">, the browser is supposed to fire an `input` event (https://developer.mozilla.org/en-US/docs/Web/Events/input ) at that <input> element.
Safari/WebKit doesn't currently comply with this, and doesn't fire `input` events in these cases.

Steps to reproduce:
1. Open http://jsbin.com/jojoji/edit?html,output in Chrome.
2. Check the checkbox.
3. Click one of the two radio buttons.
4. Click "Choose File" and select a file.

Expected results:
After each of steps 2 thru 4, an alert box with the message "input!" should be displayed (because an `input` event should be fired at the respective <input> element).

Actual results:
No alert boxes are shown because no `input` events were fired.

Other info:
Equivalent Chrome bug: https://code.google.com/p/chromium/issues/detail?id=534245
Comment 1 Chris Rebert 2015-12-31 20:38:43 PST
Erm, obviously I meant Safari rather than Chrome in the Steps to Reproduce.
Comment 2 Chris Rebert 2016-02-02 19:05:19 PST
HTML spec bug: https://github.com/whatwg/html/issues/601
Comment 3 Radar WebKit Bug Importer 2016-04-02 19:27:53 PDT
Comment 4 Chris Rebert 2016-06-06 10:33:33 PDT
Firefox 49 now fires these events.
Comment 5 Domenic Denicola 2017-05-16 13:57:57 PDT
Some tests added at http://w3c-test.org/html/semantics/forms/the-input-element/checkbox-click-events.html
Comment 6 m.kurz+webkitbugs 2018-01-30 06:12:49 PST
The Chrome team marked that bug as fixed as well with Chrome 66:
Comment 7 Lucas Forschler 2019-02-06 09:18:33 PST
Mass move bugs into the DOM component.
Comment 8 Alexey Shvayka 2020-05-04 16:14:04 PDT
(In reply to Chris Rebert from comment #0)
> 1. Open http://jsbin.com/jojoji/edit?html,output in Chrome.

(In reply to Domenic Denicola from comment #5)
> Some tests added at
> http://w3c-test.org/html/semantics/forms/the-input-element/checkbox-click-
> events.html

As of Safari 13.1, jsbin.com example works as expected (for all <input> types) and web platform tests do pass.
Comment 9 m.kurz+webkitbugs 2020-05-05 05:57:35 PDT
More specific details on the fixes:

Starting with Safari 12.1 the radio inputs and checkbox inputs fire “click”, “input”, and “change” events in order when clicked.
-> "Fixed radio inputs and checkbox inputs to fire “click”, “input”, and “change” events in order when clicked"
Preview 67 was mentioned in the 12.1 blog post here (see bottom): https://webkit.org/blog/8718/new-webkit-features-in-safari-12-1/

Starting with Safari 13.1 finally the file input fires an input event before the change event:
-> "Changed the file input to fire an input event before the change event"
Preview 97 was mentioned in the 13.1 blog post here (see bottom):