Ignore input event that echoes the previous label event.

This not only duplicates the details-menu-selected event but it also uses an updated input (so if it was not checked in the first event, it is already checked inthe echoed event).

Author: pablonete

src/index.ts

@@ -174,6 +174,10 @@ function shouldCommit(details: Element, menu: DetailsMenuElement, event: Event)
 
   if (event.type === 'click') {
     const menuitem = target.closest('[role="menuitem"], [role="menuitemradio"]')
+
+    // Ignore double event caused by inputs nested in labels
+    if (menuitem?.tagName === 'LABEL' && target !== menuitem) return
+
     const input = menuitem?.querySelector('input')
     // An input inside a label will be committed as a change event (we assume it's a radio input),
     // unless the input is already checked, so we need to commit on click (to close the popup)

test/test.js

@@ -279,6 +279,11 @@ describe('details-menu element', function () {
       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')
+
+      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, 2, 'selected event is fired again')
     })
   })
 
@@ -313,6 +318,11 @@ describe('details-menu element', function () {
       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')
+
+      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, 2, 'selected event is fired again')
     })
   })