Fire "input" events as composed

This is how things have been implemented in all browsers, probably based
off of the definitions in the UI Events specification. See also the
discussion in #5453.

This includes an editorial change to deduplicate some repeated text in
the <input type=file> section.

Author: domenic

source

@@ -2972,6 +2972,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x="dom-Event-currentTarget" data-x-href="https://dom.spec.whatwg.org/#dom-event-currenttarget"><code>currentTarget</code></dfn> attribute</li>
      <li><dfn data-x="dom-Event-bubbles" data-x-href="https://dom.spec.whatwg.org/#dom-event-bubbles"><code>bubbles</code></dfn> attribute</li>
      <li><dfn data-x="dom-Event-cancelable" data-x-href="https://dom.spec.whatwg.org/#dom-event-cancelable"><code>cancelable</code></dfn> attribute</li>
+     <li><dfn data-x="dom-Event-composed" data-x-href="https://dom.spec.whatwg.org/#dom-event-composed"><code>composed</code></dfn> attribute</li>
      <li><dfn data-x-href="https://dom.spec.whatwg.org/#composed-flag">composed flag</dfn></li>
      <li><dfn data-x="dom-Event-isTrusted" data-x-href="https://dom.spec.whatwg.org/#dom-event-istrusted"><code>isTrusted</code></dfn> attribute</li>
      <li><dfn data-x="dom-Event-initEvent" data-x-href="https://dom.spec.whatwg.org/#dom-event-initevent"><code>initEvent()</code></dfn> method</li>
@@ -45048,7 +45049,8 @@ interface <dfn>HTMLInputElement</dfn> : <span>HTMLElement</span> {
    <li><p><span>Queue an element task</span> on the <span>user interaction task source</span> given
    the element to <span data-x="concept-event-fire">fire an event</span> named <code
    data-x="event-input">input</code> at the element, with the <code
-   data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
+   data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
+   attributes initialized to true.</p></li>
   </ol>
 
   </div>
@@ -47033,7 +47035,8 @@ ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
 
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
    data-x="event-input">input</code> at the element with the <code
-   data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
+   data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
+   attributes initialized to true.</p></li>
 
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
    data-x="event-change">change</code> at the element with the <code
@@ -47189,7 +47192,8 @@ ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
 
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
    data-x="event-input">input</code> at the element with the <code
-   data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
+   data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
+   attributes initialized to true.</p></li>
 
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
    data-x="event-change">change</code> at the element with the <code
@@ -47343,41 +47347,42 @@ ldh-str       = &lt; as defined in <a href="https://tools.ietf.org/html/rfc1034#
 
      <li><p>Wait for the user to have made their selection.</p></li>
 
-     <li>
-      <p><span>Queue an element task</span> on the <span>user interaction task source</span> given
-      the <code>input</code> element and the following steps:</p>
-
-      <ol>
-       <li><p>Update the element's <span data-x="concept-input-type-file-selected">selected
-       files</span> so that it represents the user's selection.</p></li>
-
-       <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
-       data-x="event-input">input</code> at the <code>input</code> element, with the <code
-       data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true, and finally <span
-       data-x="concept-event-fire">fire an event</span> named <code
-       data-x="event-change">change</code> at the <code>input</code> element, with the <code
-       data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
-      </ol>
-     </li>
+     <li><p><span>Update the file selection</span> for the <code>input</code> element.</p></li>
     </ol>
    </li>
   </ol>
 
   <p>If the element is <i data-x="concept-fe-mutable">mutable</i>, the user agent should allow the
-  user to change the files on the list in other ways also, e.g. adding or removing files by
-  drag-and-drop. When the user does so, the user agent must <span>queue an element task</span> on
-  the <span>user interaction task source</span> given the <code>input</code> element to first update
-  the element's <span data-x="concept-input-type-file-selected">selected files</span> so that it
-  represents the user's new selection, then <span data-x="concept-event-fire">fire an event</span>
-  named <code data-x="event-input">input</code> at the <code>input</code> element, with the <code
-  data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true, and finally <span
-  data-x="concept-event-fire">fire an event</span> named <code data-x="event-change">change</code>
-  at the <code>input</code> element, with the <code data-x="dom-Event-bubbles">bubbles</code>
-  attribute initialized to true.</p>
+  user to change the files on the list in other ways also, e.g., adding or removing files by
+  drag-and-drop. When the user does so, the user agent must <span>update the file selection</span>
+  for the element.</p>
 
   <p>If the element is not <i data-x="concept-fe-mutable">mutable</i>, the user agent must not allow
   the user to change the element's selection.</p>
 
+  <p>To <dfn>update the file selection</dfn> for an element <var>element</var>:</p>
+
+  <ol>
+   <li>
+    <p><span>Queue an element task</span> on the <span>user interaction task source</span> given
+    <var>element</var> and the following steps:</p>
+
+    <ol>
+     <li><p>Update <var>element</var>'s <span data-x="concept-input-type-file-selected">selected
+     files</span> so that it represents the user's selection.</p></li>
+
+     <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
+     data-x="event-input">input</code> at the <code>input</code> element, with the <code
+     data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
+     attributes initialized to true.</p></li>
+
+     <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
+     data-x="event-change">change</code> at the <code>input</code> element, with the <code
+     data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
+    </ol>
+   </li>
+  </ol>
+
   <p><strong>Constraint validation</strong>: If the element is <i
   data-x="concept-input-required">required</i> and the list of <span
   data-x="concept-input-type-file-selected">selected files</span> is empty, then the element is
@@ -49359,12 +49364,12 @@ You cannot submit this form when the field is incorrect.</samp></pre>
   <span>queue an element task</span> on the <span>user interaction task source</span> given the
   <code>input</code> element to <span data-x="concept-event-fire">fire an event</span> named <code
   data-x="event-input">input</code> at the <code>input</code> element, with the <code
-  data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true, and any time the user
-  commits the change, the user agent must <span>queue an element task</span> on the <span>user
-  interaction task source</span> given the <code>input</code> element to <span
-  data-x="concept-event-fire">fire an event</span> named <code data-x="event-change">change</code>
-  at the <code>input</code> element, with the <code data-x="dom-Event-bubbles">bubbles</code>
-  attribute initialized to true.</p>
+  data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
+  attributes initialized to true, and any time the user commits the change, the user agent must
+  <span>queue an element task</span> on the <span>user interaction task source</span> given the
+  <code>input</code> element to <span data-x="concept-event-fire">fire an event</span> named <code
+  data-x="event-change">change</code> at the <code>input</code> element, with the <code
+  data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p>
 
   <p class="example">An example of a user interface involving both interactive manipulation and a
   commit action would be a <span data-x="attr-input-type-range">Range</span> controls that use a
@@ -49380,7 +49385,8 @@ You cannot submit this form when the field is incorrect.</samp></pre>
   agent must <span>queue an element task</span> on the <span>user interaction task source</span>
   given the <code>input</code> element to first <span data-x="concept-event-fire">fire an
   event</span> named <code data-x="event-input">input</code> at the <code>input</code> element, with
-  the <code data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true, and then <span
+  the <code data-x="dom-Event-bubbles">bubbles</code> and <code
+  data-x="dom-Event-composed">composed</code> attributes initialized to true, and then <span
   data-x="concept-event-fire">fire an event</span> named <code data-x="event-change">change</code>
   at the <code>input</code> element, with the <code data-x="dom-Event-bubbles">bubbles</code>
   attribute initialized to true.</p>
@@ -49403,9 +49409,10 @@ You cannot submit this form when the field is incorrect.</samp></pre>
   action, the user agent must <span>queue an element task</span> on the <span>user interaction task
   source</span> given the <code>input</code> element to <span data-x="concept-event-fire">fire an
   event</span> named <code data-x="event-input">input</code> at the <code>input</code> element, with
-  the <code data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true. The
-  corresponding <code data-x="event-change">change</code> event, if any, will be fired when the
-  control <a href="#unfocus-causes-change-event">loses focus</a>.</p>
+  the <code data-x="dom-Event-bubbles">bubbles</code> and <code
+  data-x="dom-Event-composed">composed</code> attributes initialized to true. The corresponding
+  <code data-x="event-change">change</code> event, if any, will be fired when the control <a
+  href="#unfocus-causes-change-event">loses focus</a>.</p>
 
   <p class="example">Examples of a user changing the element's <span
   data-x="concept-fe-value">value</span> would include the user typing into a text control, pasting
@@ -49432,7 +49439,8 @@ You cannot submit this form when the field is incorrect.</samp></pre>
   task source</span> given the <code>input</code> element to first update the <span
   data-x="concept-fe-value">value</span> accordingly, then <span data-x="concept-event-fire">fire an
   event</span> named <code data-x="event-input">input</code> at the <code>input</code> element, with
-  the <code data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true, then <span
+  the <code data-x="dom-Event-bubbles">bubbles</code> and <code
+  data-x="dom-Event-composed">composed</code> attributes initialized to true, then <span
   data-x="concept-event-fire">fire an event</span> named <code data-x="event-change">change</code>
   at the <code>input</code> element, with the <code data-x="dom-Event-bubbles">bubbles</code>
   attribute initialized to true.</p>
@@ -49882,7 +49890,8 @@ interface <dfn>HTMLSelectElement</dfn> : <span>HTMLElement</span> {
   <ol>
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
    data-x="event-input">input</code> at the <code>select</code> element, with the <code
-   data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
+   data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
+   attributes initialized to true.</p></li>
 
    <li><p><span data-x="concept-event-fire">Fire an event</span> named <code
    data-x="event-change">change</code> at the <code>select</code> element, with the <code
@@ -50780,10 +50789,11 @@ interface <dfn>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {
   element task</span> on the <span>user interaction task source</span> given the
   <code>textarea</code> element to <span data-x="concept-event-fire">fire an event</span> named
   <code data-x="event-input">input</code> at the <code>textarea</code> element, with the <code
-  data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true. User agents may wait for
-  a suitable break in the user's interaction before queuing the task; for example, a user agent
-  could wait for the user to have not hit a key for 100ms, so as to only fire the event when the
-  user pauses, instead of continuously for each keystroke.</p>
+  data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
+  attributes initialized to true. User agents may wait for a suitable break in the user's
+  interaction before queuing the task; for example, a user agent could wait for the user to have not
+  hit a key for 100ms, so as to only fire the event when the user pauses, instead of continuously
+  for each keystroke.</p>
   <!-- same text is present in the <input> section -->
 
   <p>A <code>textarea</code> element's <span data-x="concept-fe-dirty">dirty value flag</span> must
@@ -50824,7 +50834,8 @@ interface <dfn>HTMLTextAreaElement</dfn> : <span>HTMLElement</span> {
    <li><p><span>Queue an element task</span> on the <span>user interaction task source</span> given
    the <code>textarea</code> element to <span data-x="concept-event-fire">fire an event</span> named
    <code data-x="event-input">input</code> at the <code>textarea</code> element, with the <code
-   data-x="dom-Event-bubbles">bubbles</code> attribute initialized to true.</p></li>
+   data-x="dom-Event-bubbles">bubbles</code> and <code data-x="dom-Event-composed">composed</code>
+   attributes initialized to true.</p></li>
   </ol>
 
   </div>