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

Fire "input" events as composed #5822

Merged
merged 2 commits into from
Aug 18, 2020
Merged

Fire "input" events as composed #5822

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
57be0e2
Fire "input" events as composed
domenic Aug 13, 2020
8749370
nit
annevk Aug 18, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
103 changes: 57 additions & 46 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -45050,7 +45051,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>
Expand Down Expand Up @@ -47035,7 +47037,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
Expand Down Expand Up @@ -47191,7 +47194,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
Expand Down Expand Up @@ -47345,41 +47349,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
Expand Down Expand Up @@ -49361,12 +49366,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
Expand All @@ -49382,7 +49387,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>
Expand All @@ -49405,9 +49411,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
Expand All @@ -49434,7 +49441,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>
Expand Down Expand Up @@ -49884,7 +49892,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
Expand Down Expand Up @@ -50782,10 +50791,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
Expand Down Expand Up @@ -50826,7 +50836,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>
Expand Down