Merge pull request #53 from github/nested

muan · web-flow · commit 7a31780df864 · 2020-03-10T16:38:03.000-04:00
Fix nested details misfiring close events
diff --git a/index.js b/index.js
@@ -82,8 +82,8 @@ function allowClosingDialog(details: Element): boolean {
 
 function onSummaryClick(event: Event): void {
   if (!(event.currentTarget instanceof Element)) return
-  const details = event.currentTarget.closest('details[open]')
-  if (!details) return
+  const details = event.currentTarget.closest('details')
+  if (!details || !details.hasAttribute('open')) return
 
   // Prevent summary click events if details-dialog-close was cancelled
   if (!allowClosingDialog(details)) {
diff --git a/test/test.js b/test/test.js
@@ -22,23 +22,25 @@ describe('details-dialog-element', function() {
     beforeEach(function() {
       const container = document.createElement('div')
       container.innerHTML = `
-        <details>
-          <summary>Click</summary>
-          <details-dialog>
-            <p>Hello</p>
-            <button data-button>Button</button>
-            <button hidden>hidden</button>
-            <div hidden><button>hidden</button></div>
-            <details><button>Button in closed details</button></details>
-            <button ${CLOSE_ATTR}>Goodbye</button>
-          </details-dialog>
+        <details open>
+          <details id="details">
+            <summary id="summary">Click</summary>
+            <details-dialog>
+              <p>Hello</p>
+              <button data-button>Button</button>
+              <button hidden>hidden</button>
+              <div hidden><button>hidden</button></div>
+              <details><button>Button in closed details</button></details>
+              <button ${CLOSE_ATTR}>Goodbye</button>
+            </details-dialog>
+          </details>
         </details>
       `
       document.body.append(container)
 
-      details = document.querySelector('details')
+      details = document.querySelector('#details')
       dialog = details.querySelector('details-dialog')
-      summary = details.querySelector('summary')
+      summary = details.querySelector('#summary')
       close = dialog.querySelector(CLOSE_SELECTOR)
     })
 
@@ -135,6 +137,11 @@ describe('details-dialog-element', function() {
       allowCloseToHappen = true
       close.click()
       assert(!details.open)
+      assert.equal(closeRequestCount, 5)
+
+      summary.click()
+      assert(details.open)
+      assert.equal(closeRequestCount, 5)
     })
 
     describe('when no summary element is present', function() {
