Merge pull request #29 from github/radio-events

Fix radio input check triggering multiple details-menu-select events

Author: muan

index.js

@@ -169,11 +169,16 @@ function shouldCommit(event: Event) {
   // Ignore clicks from nested details.
   if (target.closest('details') !== details) return
 
-  const menuitem =
-    event.type === 'change'
-      ? target.closest('[role="menuitemradio"], [role="menuitemcheckbox"]')
-      : target.closest('[role="menuitem"], [role="menuitemradio"]')
-  if (menuitem) commit(menuitem, details)
+  if (event.type === 'click') {
+    const menuitem = target.closest('[role="menuitem"], [role="menuitemradio"]')
+    const onlyCommitOnChangeEvent = menuitem && menuitem.tagName === 'LABEL' && menuitem.querySelector('input')
+    if (menuitem && !onlyCommitOnChangeEvent) {
+      commit(menuitem, details)
+    }
+  } else if (event.type === 'change') {
+    const menuitem = target.closest('[role="menuitemradio"], [role="menuitemcheckbox"]')
+    if (menuitem) commit(menuitem, details)
+  }
 }
 
 function updateChecked(selected: Element, details: Element) {

package-lock.json

@@ -248,13 +248,17 @@ describe('details-menu element', function() {
       document.body.innerHTML = ''
     })
 
-    it('manages checked state', function() {
+    it('manages checked state and fires events', function() {
       const details = document.querySelector('details')
       const item = details.querySelector('button')
+      let eventCounter = 0
+      document.addEventListener('details-menu-selected', () => eventCounter++, true)
+
       assert.equal(item.getAttribute('aria-checked'), 'false')
       item.dispatchEvent(new MouseEvent('click', {bubbles: true}))
       assert.equal(item.getAttribute('aria-checked'), 'true')
       assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 1)
+      assert.equal(eventCounter, 1, 'selected event is fired once')
     })
   })
 
@@ -278,13 +282,17 @@ describe('details-menu element', function() {
       document.body.innerHTML = ''
     })
 
-    it('manages checked state', function() {
+    it('manages checked state and fires events', function() {
       const details = document.querySelector('details')
       const item = details.querySelector('label')
+      let eventCounter = 0
+      document.addEventListener('details-menu-selected', () => eventCounter++, true)
+
       assert.equal(item.getAttribute('aria-checked'), 'false')
       item.dispatchEvent(new MouseEvent('click', {bubbles: true}))
       assert.equal(item.getAttribute('aria-checked'), 'true')
       assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 1)
+      assert.equal(eventCounter, 1, 'selected event is fired once')
     })
   })