diff --git a/src/docs/03-combobox.md b/src/docs/03-combobox.md
index 38c62fb..45a723d 100644
--- a/src/docs/03-combobox.md
+++ b/src/docs/03-combobox.md
@@ -86,17 +86,14 @@ Comboboxes are the foundation of accessible autocompletes and command palettes f
>
{#each filtered as value}
{@const active = $combobox.active === value}
- {@const selected = $combobox.selected === value}
- {value.name}
- {#if selected}
-
-
- {/if}
+ {value.name}
+
+
{:else}
diff --git a/src/docs/04-combobox-multi.md b/src/docs/04-combobox-multi.md
index 061fd38..9232f62 100644
--- a/src/docs/04-combobox-multi.md
+++ b/src/docs/04-combobox-multi.md
@@ -101,17 +101,14 @@ Pass an array to the `selected` property of `createCombobox` to trigger multi-se
>
{#each filtered as value}
{@const active = $combobox.active === value}
- {@const selected = $combobox.selected.includes(value)}
- {value.name}
- {#if selected}
-
-
- {/if}
+ {value.name}
+
+
{:else}
diff --git a/src/docs/07-listbox.md b/src/docs/07-listbox.md
index 5536756..fe5fb9c 100644
--- a/src/docs/07-listbox.md
+++ b/src/docs/07-listbox.md
@@ -73,18 +73,14 @@ Listboxes are a great foundation for building custom, accessible select menus fo
class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
{#each people as value, i}
- {@const active = $listbox.active === value}
- {@const selected = $listbox.selected === value}
- {value.name}
- {#if selected}
-
-
- {/if}
+ {value.name}
+
+
{/each}
diff --git a/src/docs/08-listbox-multi.md b/src/docs/08-listbox-multi.md
index 7d0e943..fd5df88 100644
--- a/src/docs/08-listbox-multi.md
+++ b/src/docs/08-listbox-multi.md
@@ -92,18 +92,14 @@ Pass an array to the `selected` property of `createListbox` to trigger multi-sel
class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
{#each people as value (value.id)}
- {@const active = $listbox.active === value}
- {@const selected = $listbox.selected.includes(value)}
- {value.name}
- {#if selected}
-
-
- {/if}
+ {value.name}
+
+
{/each}
diff --git a/src/docs/09-menu.md b/src/docs/09-menu.md
index f7303b5..e0c70a4 100644
--- a/src/docs/09-menu.md
+++ b/src/docs/09-menu.md
@@ -91,7 +91,7 @@ Menus offer an easy way to build custom, accessible dropdown components with rob
{@const active = $menu.active === option.text}
) {
set({ active })
const item = state.items[active]
if (item) {
- item.node.scrollIntoView({ block: 'nearest' })
+ item.node.focus()
}
}
}
diff --git a/src/lib/menu.ts b/src/lib/menu.ts
index ca85f14..08ba1bd 100644
--- a/src/lib/menu.ts
+++ b/src/lib/menu.ts
@@ -58,7 +58,15 @@ export function createMenu(init?: Partial) {
const toggle = () => state.expanded ? close() : open()
// set focused (active) item (open if not expanded) only if changed
- const focus = (active: number, expand = false) => state.active !== active && set({ expanded: state.expanded || expand, active })
+ const focus = (active: number, expand = false) => {
+ if (state.active !== active) {
+ set({ expanded: state.expanded || expand, active })
+ const item = state.items[active];
+ if (item) {
+ item.node.focus()
+ }
+ }
+ }
// set focus (active) to first
const first = () => focus(firstActive(state), true)
diff --git a/src/routes/example/combobox/+page.svelte b/src/routes/example/combobox/+page.svelte
index 4084709..b8cec0e 100644
--- a/src/routes/example/combobox/+page.svelte
+++ b/src/routes/example/combobox/+page.svelte
@@ -55,17 +55,14 @@
>
{#each filtered as value}
{@const active = $combobox.active === value}
- {@const selected = $combobox.selected === value}
- {value.name}
- {#if selected}
-
-
- {/if}
+ {value.name}
+
+
{:else}
diff --git a/src/routes/example/combobox/multi/+page.svelte b/src/routes/example/combobox/multi/+page.svelte
index a1251c5..ad1ff64 100644
--- a/src/routes/example/combobox/multi/+page.svelte
+++ b/src/routes/example/combobox/multi/+page.svelte
@@ -71,17 +71,14 @@
>
{#each filtered as value}
{@const active = $combobox.active === value}
- {@const selected = $combobox.selected.includes(value)}
- {value.name}
- {#if selected}
-
-
- {/if}
+ {value.name}
+
+
{:else}
diff --git a/src/routes/example/listbox/+page.svelte b/src/routes/example/listbox/+page.svelte
index 90f2b57..4ad8155 100644
--- a/src/routes/example/listbox/+page.svelte
+++ b/src/routes/example/listbox/+page.svelte
@@ -43,18 +43,14 @@
class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
{#each people as value, i}
- {@const active = $listbox.active === value}
- {@const selected = $listbox.selected === value}
- {value.name}
- {#if selected}
-
+ {value.name}
+
- {/if}
{/each}
diff --git a/src/routes/example/listbox/multi/+page.svelte b/src/routes/example/listbox/multi/+page.svelte
index 7d3e909..07d644b 100644
--- a/src/routes/example/listbox/multi/+page.svelte
+++ b/src/routes/example/listbox/multi/+page.svelte
@@ -62,18 +62,14 @@
class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
>
{#each people as value (value.id)}
- {@const active = $listbox.active === value}
- {@const selected = $listbox.selected.includes(value)}
- {value.name}
- {#if selected}
-
+ {value.name}
+
- {/if}
{/each}
diff --git a/src/routes/example/menu/+page.svelte b/src/routes/example/menu/+page.svelte
index 1b09094..f300a8b 100644
--- a/src/routes/example/menu/+page.svelte
+++ b/src/routes/example/menu/+page.svelte
@@ -60,7 +60,7 @@
{@const active = $menu.active === option.text}