diff --git a/examples/index.html b/examples/index.html
index 5d985dd..48ae4f7 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -1,85 +1,94 @@
-
+
-
-
- Codestin Search App
-
-
-
- Base examples
+
+
+ Codestin Search App
+
+
+
+ Base examples
-
- Best robot: Unknown
-
-
-
-
-
-
+
+ Best robot: Unknown
+
+
+
+
+
+
-
- Best robot: Unknown
-
-
-
-
-
-
+
+ Best robot: Unknown
+
+
+
+
+
+
-
- Favorite robots
-
-
-
-
-
-
+
+ Favorite robots
+
+
+
+
+
+
-
- Favorite robots
-
-
-
-
-
-
+
+ Favorite robots
+
+
+
+
+
+
- Autofocus example
- summary may have autofocus so it's the initially focused element in the page.
- Then any focusable element inside the popup can declare autofocus too, so it gets focus when the popup is opened.
+ Autofocus example
+ summary may have autofocus so it's the initially focused element in the page.
+
+ Then any focusable element inside the popup can declare autofocus too, so it gets focus when the popup is opened.
+
-
- Autofocus picker
-
-
-
-
-
-
-
+
+ Autofocus picker
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
index 7f57e6d..e010eb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@github/details-menu-element",
- "version": "1.0.11",
+ "version": "1.0.12",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@github/details-menu-element",
- "version": "1.0.10",
+ "version": "1.0.12",
"license": "MIT",
"devDependencies": {
"@github/prettier-config": "0.0.4",
diff --git a/package.json b/package.json
index 611ba06..02334aa 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@github/details-menu-element",
- "version": "1.0.11",
+ "version": "1.0.12",
"description": "A menu opened with a button.",
"main": "dist/index.js",
"module": "dist/index.js",
diff --git a/src/index.ts b/src/index.ts
index 3288118..81a4cf1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -172,10 +172,14 @@ function shouldCommit(details: Element, event: Event) {
const menuitem = target.closest('[role="menuitem"], [role="menuitemradio"]')
if (!menuitem) return
+ const input = menuitem.querySelector('input')
+
// Ignore double event caused by inputs nested in labels
- if (menuitem.tagName === 'LABEL' && target !== menuitem) return
+ // Known issue: This will wrongly ignore a legit click event on an already checked input,
+ // but inputs are not expected to be visible in the menu items.
+ // I've found no way to discriminate the legit event from the echo one, and we don't want to trigger the selected event twice.
+ if (menuitem.tagName === 'LABEL' && target === input) 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)
const onlyCommitOnChangeEvent = menuitem.tagName === 'LABEL' && input && !input.checked