-
Notifications
You must be signed in to change notification settings - Fork 0
/
combobox.html
71 lines (65 loc) · 1.99 KB
/
combobox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Combo Box Test</title>
<style>
[aria-selected="true"] {
font-weight: bold;
}
ul {
list-style: none;
}
</style>
</head>
<body>
<h1>Combo Box Test</h1>
<form>
<label>
Least favorite robot
<input aria-controls="list-id" role="combobox" type="text">
</label>
<ul role="listbox" id="list-id" hidden>
<li id="baymax" role="option" aria-checked="false">Baymax</li>
<li id="bb-8" role="option" aria-checked="false"><del>BB-8</del></li>
<li id="hubot" role="option" aria-checked="false">Hubot</li>
<li id="r2-d2" role="option" aria-checked="false">R2-D2</li>
</ul>
</form>
<pre class="events" aria-live="assertive"></pre>
<script type="module">
import Combobox from 'https://jscholes.github.io/combobox.js'
const input = document.querySelector('input')
const list = document.querySelector('ul')
const comboboxController = new Combobox(input, list)
function toggleList(show) {
const hidden = show === true ? false : input.value.length === 0
if (hidden) {
comboboxController.stop()
} else {
comboboxController.start()
}
list.hidden = hidden
}
input.addEventListener('keydown', event => {
if (!['ArrowDown', 'ArrowUp'].includes(event.key) || !list.hidden) return
toggleList(true)
comboboxController.navigate(event.key === 'ArrowDown' ? 1 : -1)
})
input.addEventListener('input', () => toggleList())
input.addEventListener('focus', () => toggleList())
input.addEventListener('blur', () => {
list.hidden = true
comboboxController.clearSelection()
comboboxController.stop()
})
const events = document.querySelector('.events')
document.addEventListener('combobox-commit', function(event) {
events.append(`${event.target.textContent} committed, combobox-commit event fired\n`)
list.hidden = true
comboboxController.clearSelection()
comboboxController.stop()
})
</script>
</body>
</html>