Skip to content

Commit ff3c131

Browse files
koddssonkoddsson
authored
Merge pull request #54 from pablonete/label-span-input
Support click from nested elements
2 parents 04474bb + 5b1a1d5 commit ff3c131

File tree

2 files changed

+91
-78
lines changed

2 files changed

+91
-78
lines changed

‎examples/index.html

Lines changed: 85 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,94 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<title>details-menu demo</title>
6-
<style>
7-
details-menu {
8-
background: white;
9-
border: 1px solid;
10-
display: block;
11-
padding: 4px;
12-
width: 200px;
13-
}
14-
button, label[tabindex] {
15-
font-family: inherit;
16-
font-size: inherit;
17-
display: block;
18-
background: none;
19-
border: 0;
20-
width: 100%;
21-
text-align: left;
22-
padding: 0;
23-
}
24-
</style>
25-
</head>
26-
<body>
27-
<h1>Base examples</h1>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>details-menu demo</title>
6+
<style>
7+
details-menu {
8+
background: white;
9+
border: 1px solid;
10+
display: block;
11+
padding: 4px;
12+
width: 200px;
13+
}
14+
button,
15+
label[tabindex] {
16+
font-family: inherit;
17+
font-size: inherit;
18+
display: block;
19+
background: none;
20+
border: 0;
21+
width: 100%;
22+
text-align: left;
23+
padding: 0;
24+
}
25+
</style>
26+
</head>
27+
<body>
28+
<h1>Base examples</h1>
2829

29-
<details>
30-
<summary>Best robot: <span data-menu-button>Unknown</span></summary>
31-
<details-menu>
32-
<button type="button" role="menuitem" data-menu-button-text>Hubot</button>
33-
<button type="button" role="menuitem" data-menu-button-text>Bender</button>
34-
<button type="button" role="menuitem" data-menu-button-text>BB-8</button>
35-
</details-menu>
36-
</details>
30+
<details>
31+
<summary>Best robot: <span data-menu-button>Unknown</span></summary>
32+
<details-menu>
33+
<button type="button" role="menuitem" data-menu-button-text>Hubot</button>
34+
<button type="button" role="menuitem" data-menu-button-text>Bender</button>
35+
<button type="button" role="menuitem" data-menu-button-text>BB-8</button>
36+
</details-menu>
37+
</details>
3738

38-
<details>
39-
<summary>Best robot: <span data-menu-button>Unknown</span></summary>
40-
<details-menu>
41-
<label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Hubot</label>
42-
<label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> Bender</label>
43-
<label tabindex="0" role="menuitemradio" data-menu-button-text><input type="radio" name="robot"> BB-8</label>
44-
</details-menu>
45-
</details>
39+
<details>
40+
<summary>Best robot: <span data-menu-button>Unknown</span></summary>
41+
<details-menu>
42+
<label tabindex="0" role="menuitemradio" data-menu-button-text>
43+
<span><input type="radio" name="robot" /> Hubot</span>
44+
</label>
45+
<label tabindex="0" role="menuitemradio" data-menu-button-text>
46+
<span><input type="radio" name="robot" /> Bender</span>
47+
</label>
48+
<label tabindex="0" role="menuitemradio" data-menu-button-text>
49+
<span><input type="radio" name="robot" /> BB-8</span>
50+
</label>
51+
</details-menu>
52+
</details>
4653

47-
<details>
48-
<summary>Favorite robots</summary>
49-
<details-menu>
50-
<label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Hubot</label>
51-
<label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> Bender</label>
52-
<label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot"> BB-8</label>
53-
</details-menu>
54-
</details>
54+
<details>
55+
<summary>Favorite robots</summary>
56+
<details-menu>
57+
<label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot" /> Hubot</label>
58+
<label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot" /> Bender</label>
59+
<label tabindex="0" role="menuitemcheckbox"><input type="checkbox" name="robot" /> BB-8</label>
60+
</details-menu>
61+
</details>
5562

56-
<details>
57-
<summary data-menu-button>Favorite robots</summary>
58-
<details-menu>
59-
<button type="submit" name="robot" value="Hubot" role="menuitemradio" data-menu-button-text>Hubot</button>
60-
<button type="submit" name="robot" value="Bender" role="menuitemradio" data-menu-button-text>Bender</button>
61-
<button type="submit" name="robot" value="BB-8" role="menuitemradio" data-menu-button-text>BB-8</button>
62-
</details-menu>
63-
</details>
63+
<details>
64+
<summary data-menu-button>Favorite robots</summary>
65+
<details-menu>
66+
<button type="submit" name="robot" value="Hubot" role="menuitemradio" data-menu-button-text>Hubot</button>
67+
<button type="submit" name="robot" value="Bender" role="menuitemradio" data-menu-button-text>Bender</button>
68+
<button type="submit" name="robot" value="BB-8" role="menuitemradio" data-menu-button-text>BB-8</button>
69+
</details-menu>
70+
</details>
6471

65-
<h1>Autofocus example</h1>
66-
<p><code>summary</code> may have <code>autofocus</code> so it's the initially focused element in the page.</p>
67-
<p>Then any focusable element inside the popup can declare autofocus too, so it gets focus when the popup is opened.</p>
72+
<h1>Autofocus example</h1>
73+
<p><code>summary</code> may have <code>autofocus</code> so it's the initially focused element in the page.</p>
74+
<p>
75+
Then any focusable element inside the popup can declare autofocus too, so it gets focus when the popup is opened.
76+
</p>
6877

69-
<details>
70-
<summary data-menu-button autofocus>Autofocus picker</summary>
71-
<details-menu>
72-
<input type="text" autofocus />
73-
<button type="submit" name="robot" value="Hubot" role="menuitemradio" data-menu-button-text>Hubot</button>
74-
<button type="submit" name="robot" value="Bender" role="menuitemradio" data-menu-button-text>Bender</button>
75-
<button type="submit" name="robot" value="BB-8" role="menuitemradio" data-menu-button-text>BB-8</button>
76-
</details-menu>
77-
</details>
78+
<details>
79+
<summary data-menu-button autofocus>Autofocus picker</summary>
80+
<details-menu>
81+
<input type="text" autofocus />
82+
<button type="submit" name="robot" value="Hubot" role="menuitemradio" data-menu-button-text>Hubot</button>
83+
<button type="submit" name="robot" value="Bender" role="menuitemradio" data-menu-button-text>Bender</button>
84+
<button type="submit" name="robot" value="BB-8" role="menuitemradio" data-menu-button-text>BB-8</button>
85+
</details-menu>
86+
</details>
7887

79-
<script type="text/javascript">
80-
document.addEventListener('details-menu-selected', e => console.log(e))
81-
</script>
82-
<!-- <script type="module" src="../dist/index.js"></script> -->
83-
<script type="module" src="https://unpkg.com/@github/details-menu-element@latest?module"></script>
84-
</body>
88+
<script type="text/javascript">
89+
document.addEventListener('details-menu-selected', e => console.log(e))
90+
</script>
91+
<!-- <script type="module" src="../dist/index.js"></script> -->
92+
<script type="module" src="https://unpkg.com/@github/details-menu-element@latest?module"></script>
93+
</body>
8594
</html>

‎src/index.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -172,10 +172,14 @@ function shouldCommit(details: Element, event: Event) {
172172
const menuitem = target.closest('[role="menuitem"], [role="menuitemradio"]')
173173
if (!menuitem) return
174174

175+
const input = menuitem.querySelector('input')
176+
175177
// Ignore double event caused by inputs nested in labels
176-
if (menuitem.tagName === 'LABEL' && target !== menuitem) return
178+
// Known issue: This will wrongly ignore a legit click event on an already checked input,
179+
// but inputs are not expected to be visible in the menu items.
180+
// 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.
181+
if (menuitem.tagName === 'LABEL' && target === input) return
177182

178-
const input = menuitem.querySelector('input')
179183
// An input inside a label will be committed as a change event (we assume it's a radio input),
180184
// unless the input is already checked, so we need to commit on click (to close the popup)
181185
const onlyCommitOnChangeEvent = menuitem.tagName === 'LABEL' && input && !input.checked

0 commit comments

Comments
 (0)