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

Improve popover event handling in nested showing and hiding #9198

Merged
merged 9 commits into from
Jun 8, 2023
Merged

Improve popover event handling in nested showing and hiding #9198

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
93d8492
Fix a corner case where `beforetoggle` opens a new popover
josepharhar Apr 21, 2023
d8d9faa
put check popover validity back in
josepharhar Apr 21, 2023
d444536
Merge branch 'main' into popoverloop
josepharhar May 10, 2023
efdafed
started on scoped nesting flag
josepharhar May 10, 2023
1dbf6f4
finished
josepharhar May 11, 2023
cb6b5f6
move popover showing or hiding
josepharhar May 16, 2023
44e90ae
Merge branch 'main' into popoverloop
josepharhar Jun 5, 2023
1a468ae
fix assignment to repeatingHide
josepharhar Jun 5, 2023
11a385c
move up cleanupShowingFlag definition
josepharhar Jun 5, 2023
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
122 changes: 92 additions & 30 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82236,6 +82236,9 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<p>Every <span data-x="HTML elements">HTML element</span> has a <dfn>popover invoker</dfn>, which
is an <span data-x="HTML elements">HTML element</span> or null, initially set to null.</p>

<p>Every <span data-x="HTML elements">HTML element</span> has a <dfn>popover showing or
hiding</dfn>, which is a boolean, initially set to false.</p>

<p>Every <span data-x="HTML elements">HTML element</span> has a <dfn>popover toggle task</dfn>,
initially null, which is either null or a <span>struct</span> which has:</p>

Expand Down Expand Up @@ -82298,23 +82301,41 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<li><p>Set <var>element</var>'s <span>popover invoker</span> to <var>invoker</var>.</p></li>

<li>
<p>Let <var>cleanupShowingFlag</var> be the following steps:</p>

<ol>
<li><p>If <var>nestedShow</var> is false, then set <var>element</var>'s <span>popover showing
or hiding</span> to false.</p></li>
</ol>
</li>

<li><p>If the result of running <span>check popover validity</span> given <var>element</var>,
false, <var>throwExceptions</var>, and null is false, then return.</p></li>
false, <var>throwExceptions</var>, and null is false, then run <var>cleanupShowingFlag</var> and
return.</p></li>

<li><p><span>Assert</span>: <var>element</var> is not in <var>document</var>'s <span>top
layer</span>.</p></li>

<li><p>Let <var>nestedShow</var> be false.</p></li>

<li><p>If <var>element</var>'s <span>popover showing or hiding</span> is true, then set
<var>nestedShow</var> to true.</p></li>

<li><p>Set <var>element</var>'s <span>popover showing or hiding</span> to true.</p></li>

<li><p>If the result of <span data-x="concept-event-fire">firing an event</span> named <code
data-x="event-beforetoggle">beforetoggle</code>, using <code>ToggleEvent</code>, with the <code
data-x="dom-Event-cancelable">cancelable</code> attribute initialized to true, the <code
data-x="dom-ToggleEvent-oldState">oldState</code> attribute initialized to "<code
data-x="">closed</code>", and the <code data-x="dom-ToggleEvent-newState">newState</code>
attribute initialized to "<code data-x="">open</code>" at <var>element</var> is false, then
return.</p></li>
run <var>cleanupShowingFlag</var> and return.</p></li>

<li>
<p>If the result of running <span>check popover validity</span> given <var>element</var>, false,
<var>throwExceptions</var>, and <var>document</var> is false, then return.</p>
<var>throwExceptions</var>, and <var>document</var> is false, then run
<var>cleanupShowingFlag</var> and return.</p>

<p class="note"><span>Check popover validity</span> is called again because firing the <code
data-x="event-beforetoggle">beforetoggle</code> event could have disconnected this element or
Expand All @@ -82338,15 +82359,16 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<var>document</var>.</p></li>

<li><p>Run <span data-x="hide-all-popovers-until">hide all popovers until</span> given
<var>ancestor</var>, false, and true.</p></li>
<var>ancestor</var>, false, and not <var>nestedShow</var>.</p></li>

<li><p>If <var>originalType</var> is not equal to the value of <var>element</var>'s <code
data-x="attr-popover">popover</code> attribute, then throw a
<span>"<code>InvalidStateError</code>"</span> <code>DOMException</code>.</p></li>

<li>
<p>If the result of running <span>check popover validity</span> given <var>element</var>,
false, <var>throwExceptions</var>, and <var>document</var> is false, then return.</p>
false, <var>throwExceptions</var>, and <var>document</var> is false, then run
<var>cleanupShowingFlag</var> and return.</p>

<p class="note"><span>Check popover validity</span> is called again because running <span
data-x="hide-all-popovers-until">hide all popovers until</span> above could have fired the
Expand Down Expand Up @@ -82384,6 +82406,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<li><p><span>Queue a popover toggle event task</span> given <var>element</var>, "<code
data-x="">closed</code>", and "<code data-x="">open</code>".</p></li>

<li><p>Run <var>cleanupShowingFlag</var>.</p></li>
</ol>

<p>To <dfn>queue a popover toggle event task</dfn> given an element <var>element</var>, a string
Expand Down Expand Up @@ -82443,6 +82467,22 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<li><p>Let <var>document</var> be <var>element</var>'s <span>node document</span>.</p></li>

<li><p>If <var>element</var>'s <span>popover showing or hiding</span> is true, then set
<var>nestedHide</var> to true.</p></li>

<li><p>Set <var>element</var>'s <span>popover showing or hiding</span> to true.</p></li>

<li><p>If <var>nestedHide</var> is true, then set <var>fireEvents</var> to false.</p></li>

<li>
<p>Let <var>cleanupHidingFlag</var> be the following steps:</p>

<ol>
<li><p>If <var>nestedHide</var> is false, then set <var>element</var>'s <span>popover showing
or hiding</span> to false.</p></li>
</ol>
</li>

<li>
<p>If <var>element</var>'s <code data-x="attr-popover">popover</code> attribute is in the <span
data-x="attr-popover-auto-state">auto</span> state, then:</p>
Expand All @@ -82453,16 +82493,16 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<li>
<p>If the result of running <span>check popover validity</span> given <var>element</var>,
true, <var>throwExceptions</var>, and null is false, then return.</p>
true, and <var>throwExceptions</var> is false, then run <var>cleanupHidingFlag</var> and
return.</p>

<p class="note"><span>Check popover validity</span> is called again because running <span
data-x="hide-all-popovers-until">hide all popovers until</span> could have disconnected
<var>element</var> or changed its <code data-x="attr-popover">popover</code>
attribute.</p>
<var>element</var> or changed its <code data-x="attr-popover">popover</code> attribute.</p>
</li>

<li><p><span>Assert</span>: the last item in <var>document</var>'s <span>auto popover
list</span> is <var>element</var>.</p></li>
<li><p>If the last item in <var>document</var>'s <span>auto popover list</span> is
<var>element</var>, then <span>break</span>.</p></li>
</ol>
</li>

Expand All @@ -82480,7 +82520,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {

<li>
<p>If the result of running <span>check popover validity</span> given <var>element</var>,
true, <var>throwExceptions</var>, and null is false, then return.</p>
true, <var>throwExceptions</var>, and null is false, then run <var>cleanupHidingFlag</var> and
return.</p>

<p class="note"><span>Check popover validity</span> is called again because firing the <code
data-x="event-beforetoggle">beforetoggle</code> event could have disconnected
Expand Down Expand Up @@ -82515,6 +82556,8 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
step.</p></li>
</ol>
</li>

<li><p>Run <var>cleanupHidingFlag</var>.</p></li>
</ol>

<p>The <dfn method for="HTMLElement"><code
Expand Down Expand Up @@ -82561,35 +82604,54 @@ dictionary <dfn dictionary>DragEventInit</dfn> : <span>MouseEventInit</span> {
<li><p>If <var>endpoint</var> is a <code>Document</code>, then run
<var>closeAllOpenPopovers</var> and return.</p></li>

<li><p>Let <var>lastToHide</var> be null.</p></li>
<li><p><span>Assert</span>: <var>endpoint</var>'s <code data-x="attr-popover">popover</code>
attribute is in the <span data-x="attr-popover-auto-state">auto</span> state.</p></li>

<li><p>Let <var>foundEndpoint</var> be false.</p></li>
<li><p>Let <var>repeatingHide</var> be false.</p></li>

josepharhar marked this conversation as resolved.
Show resolved Hide resolved
<li>
<p>For each <var>popover</var> in <var>document</var>'s <span>auto popover list</span>:</p>
<p>Perform the following steps at least once:</p>

<ol>
<li><p>If <var>popover</var> is <var>endpoint</var>, then set <var>foundEndpoint</var> to
true.</p></li>
<li><p>Let <var>lastToHide</var> be null.</p></li>

<li><p>Otherwise, if <var>foundEndpoint</var> is true, then set <var>lastToHide</var> to
<var>popover</var> and <span>break</span>.</p></li>
</ol>
</li>
<li><p>Let <var>foundEndpoint</var> be false.</p></li>

<li><p>If <var>foundEndpoint</var> is false, then run <var>closeAllOpenPopovers</var> and
return.</p></li>
<li>
<p>For each <var>popover</var> in <var>document</var>'s <span>auto popover list</span>:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should link for each here.


<li>
<p>While <var>lastToHide</var> is not null and <var>lastToHide</var>'s <span>popover visibility
state</span> is <span data-x="popover-showing-state">showing</span> and <var>document</var>'s
<span>auto popover list</span> is not empty:</p>
<ol>
<li><p>If <var>popover</var> is <var>endpoint</var>, then set <var>foundEndpoint</var> to
true.</p></li>

<ol>
<li><p>Run the <span>hide popover algorithm</span> given <var>document</var>'s <span>auto
popover list</span>'s last element, <var>focusPreviousElement</var>, <var>fireEvents</var>, and
false.</p></li>
<li><p>Otherwise, if <var>foundEndpoint</var> is true, then set <var>lastToHide</var> to
<var>popover</var> and <span>break</span>.</p></li>
</ol>
</li>

<li><p>If <var>foundEndpoint</var> is false, then run <var>closeAllOpenPopovers</var> and
return.</p></li>

<li>
<p>While <var>lastToHide</var> is not null and <var>lastToHide</var>'s <span>popover
visibility state</span> is <span data-x="popover-showing-state">showing</span> and
<var>document</var>'s <span>auto popover list</span> is not empty:</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should make is not empty an xref.


<ol>
<li><p>Run the <span>hide popover algorithm</span> given <var>document</var>'s <span>auto
popover list</span>'s last element, <var>focusPreviousElement</var>, <var>fireEvents</var>,
and false.</p></li>
</ol>
</li>

<li><p>Set <var>repeatingHide</var> to true if <var>document</var>'s <span>auto popover
list</span> contains <var>endpoint</var> and <var>document</var>'s <span>auto popover
list</span>'s last element is not <var>endpoint</var>, otherwise false.</p></li>

<li><p>If <var>repeatingHide</var> is true, then set <var>fireEvents</var> to false.</p></li>
</ol>

<p>and keep performing them <span>while</span> <var>repeatingHide</var> is true.</p>
</li>
</ol>

Expand Down