Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 8da4419

Browse files
committed
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).
1 parent 4e0cf4c commit 8da4419

File tree

2 files changed

+14
-0
lines changed

2 files changed

+14
-0
lines changed

src/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,10 @@ function shouldCommit(details: Element, menu: DetailsMenuElement, event: Event)
174174

175175
if (event.type === 'click') {
176176
const menuitem = target.closest('[role="menuitem"], [role="menuitemradio"]')
177+
178+
// Ignore double event caused by inputs nested in labels
179+
if (menuitem?.tagName === 'LABEL' && target !== menuitem) return
180+
177181
const input = menuitem?.querySelector('input')
178182
// An input inside a label will be committed as a change event (we assume it's a radio input),
179183
// unless the input is already checked, so we need to commit on click (to close the popup)

test/test.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,11 @@ describe('details-menu element', function () {
279279
assert.equal(item.getAttribute('aria-checked'), 'true')
280280
assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 1)
281281
assert.equal(eventCounter, 1, 'selected event is fired once')
282+
283+
item.dispatchEvent(new MouseEvent('click', {bubbles: true}))
284+
assert.equal(item.getAttribute('aria-checked'), 'true')
285+
assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 1)
286+
assert.equal(eventCounter, 2, 'selected event is fired again')
282287
})
283288
})
284289

@@ -313,6 +318,11 @@ describe('details-menu element', function () {
313318
assert.equal(item.getAttribute('aria-checked'), 'true')
314319
assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 1)
315320
assert.equal(eventCounter, 1, 'selected event is fired once')
321+
322+
item.dispatchEvent(new MouseEvent('click', {bubbles: true}))
323+
assert.equal(item.getAttribute('aria-checked'), 'true')
324+
assert.equal(details.querySelectorAll('[aria-checked="true"]').length, 1)
325+
assert.equal(eventCounter, 2, 'selected event is fired again')
316326
})
317327
})
318328

0 commit comments

Comments
 (0)