public/svelte-headlessui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Move <Listbox> to bind:value

Browse Source
This commit is contained in:
Ryan Gossiaux
2022-05-25 15:22:27 -07:00
parent 7449e0e243
commit 38f1b27c57
4 changed files with 131 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/listbox/Listbox.svelte
View File

@@ -32,7 +32,7 @@
clearSearch(): void;
registerOption(id: string, dataRef: ListboxOptionDataRef): void;
unregisterOption(id: string): void;
select(value: unknown): void;
select(newValue: unknown): void;
};
const LISTBOX_CONTEXT_NAME = "headlessui-listbox-context";
@@ -69,7 +69,7 @@
Focus,
calculateActiveIndex,
} from "$lib/utils/calculate-active-index";
import { createEventDispatcher, getContext, setContext } from "svelte";
import { getContext, setContext } from "svelte";
import type { Readable, Writable } from "svelte/store";
import { writable } from "svelte/store";
import { match } from "$lib/utils/match";
@@ -92,13 +92,7 @@
export let value: StateDefinition["value"];
/***** Events *****/
const forwardEvents = forwardEventsBuilder(get_current_component(), [
"change",
]);
const dispatch = createEventDispatcher<{
change: any;
}>();
const forwardEvents = forwardEventsBuilder(get_current_component());
/***** Component *****/
$: orientation = (
@@ -229,9 +223,9 @@
return nextOptions.indexOf(currentActiveOption);
})();
},
select(value: unknown) {
select(newValue: unknown) {
if (disabled) return;
dispatch("change", value);
value = newValue;
},
});
setContext(LISTBOX_CONTEXT_NAME, api);

255
src/lib/components/listbox/listbox.test.ts vendored
View File

@@ -43,7 +43,7 @@ import {
import { Transition } from "../transitions";
import TransitionDebug from "$lib/components/disclosure/_TransitionDebug.svelte";
import svelte from "svelte-inline-compile";
import { writable } from "svelte/store";
import { get, writable } from "svelte/store";
let mockId = 0;
jest.mock('../../hooks/use-id', () => {
@@ -88,7 +88,7 @@ describe('safeguards', () => {
'should be possible to render a Listbox without crashing',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -113,7 +113,7 @@ describe('Rendering', () => {
'should render a Listbox using slot props',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log} let:open>
<Listbox value={undefined} let:open>
<ListboxButton>Trigger</ListboxButton>
{#if open}
<ListboxOptions>
@@ -145,7 +145,7 @@ describe('Rendering', () => {
'should be possible to disable a Listbox',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log} disabled>
<Listbox value={undefined} disabled>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -185,7 +185,7 @@ describe('Rendering', () => {
'should be possible to render a ListboxLabel using slot props',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxLabel let:open let:disabled>{JSON.stringify({ open, disabled })}</ListboxLabel>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
@@ -222,7 +222,7 @@ describe('Rendering', () => {
'should be possible to render a ListboxLabel with slot props and an `as` prop',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxLabel as="p" let:open let:disabled>{JSON.stringify({ open, disabled })}</ListboxLabel>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
@@ -256,7 +256,7 @@ describe('Rendering', () => {
'should render a ListboxButton with slot props',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton let:open let:disabled>{JSON.stringify({ open, disabled})}</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A </ListboxOption>
@@ -288,7 +288,7 @@ describe('Rendering', () => {
'should be possible to render a ListboxButton using slot props and an `as` prop',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton as="div" role="button" let:open let:disabled>
{JSON.stringify({ open, disabled })}
</ListboxButton>
@@ -322,7 +322,7 @@ describe('Rendering', () => {
'should be possible to render a ListboxButton and a ListboxLabel and see them linked together',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxLabel>Label</ListboxLabel>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
@@ -348,7 +348,7 @@ describe('Rendering', () => {
describe('`type` attribute', () => {
it('should set the `type` to "button" by default', async () => {
render(svelte`
<Listbox value={null} on:change={console.log}>
<Listbox value={null}>
<ListboxButton>Trigger</ListboxButton>
</Listbox>
`);
@@ -358,7 +358,7 @@ describe('Rendering', () => {
it('should not set the `type` to "button" if it already contains a `type`', async () => {
render(svelte`
<Listbox value={null} on:change={console.log}>
<Listbox value={null}>
<ListboxButton type="submit">Trigger</ListboxButton>
</Listbox>
`);
@@ -368,7 +368,7 @@ describe('Rendering', () => {
it('should not set the type if the "as" prop is not a "button"', async () => {
render(svelte`
<Listbox value={null} on:change={console.log}>
<Listbox value={null}>
<ListboxButton as="div">Trigger</ListboxButton>
</Listbox>
`);
@@ -384,7 +384,7 @@ describe('Rendering', () => {
'should render ListboxOptions with slot props',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions let:open>
<ListboxOption value="a">{JSON.stringify({ open })}</ListboxOption>
@@ -414,7 +414,7 @@ describe('Rendering', () => {
it('should be possible to always render the ListboxOptions if we provide it a `static` prop', () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions static>
<ListboxOption value="a">Option A</ListboxOption>
@@ -430,7 +430,7 @@ describe('Rendering', () => {
it('should be possible to use a different render strategy for the ListboxOptions', async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions unmount={false}>
<ListboxOption value="a">Option A</ListboxOption>
@@ -454,7 +454,7 @@ describe('Rendering', () => {
'should render a ListboxOption with slot props',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" let:active let:selected let:disabled>
@@ -486,17 +486,17 @@ describe('Rendering', () => {
it('should guarantee the listbox option order after a few unmounts', async () => {
let showFirst = writable(false);
render(svelte`
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
{#if $showFirst}
<ListboxOption value="a">Option A</ListboxOption>
{/if}
<ListboxOption value="b">Option B</ListboxOption>
<ListboxOption value="c">Option C</ListboxOption>
</ListboxOptions>
</Listbox>
`)
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
{#if $showFirst}
<ListboxOption value="a">Option A</ListboxOption>
{/if}
<ListboxOption value="b">Option B</ListboxOption>
<ListboxOption value="c">Option C</ListboxOption>
</ListboxOptions>
</Listbox>
`)
assertListboxButton({
state: ListboxState.InvisibleUnmounted,
@@ -545,7 +545,7 @@ describe('Rendering composition', () => {
'should be possible to conditionally render classNames (aka class can be a function?!)',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" class={(bag) => JSON.stringify(bag)}>Option A</ListboxOption>
@@ -614,7 +614,7 @@ describe('Rendering composition', () => {
'should be possible to swap the Listbox option with a button for example',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" as="button">Option A</ListboxOption>
@@ -646,7 +646,7 @@ describe('Composition', () => {
suppressConsoleLogs(async () => {
let orderFn = jest.fn()
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<TransitionDebug name="Listbox" fn={orderFn} />
<Transition>
@@ -701,7 +701,7 @@ describe('Keyboard interactions', () => {
'should be possible to open the listbox with Enter',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -747,7 +747,7 @@ describe('Keyboard interactions', () => {
'should not be possible to open the listbox with Enter when the button is disabled',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log} disabled>
<Listbox value={undefined} disabled>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -782,7 +782,7 @@ describe('Keyboard interactions', () => {
'should be possible to open the listbox with Enter, and focus the selected option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value="b" on:change={console.log}>
<Listbox value="b">
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -827,7 +827,7 @@ describe('Keyboard interactions', () => {
'should be possible to open the listbox with Enter, and focus the selected option (when using the `hidden` render strategy)',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value="b" on:change={console.log}>
<Listbox value="b">
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions unmount={false}>
<ListboxOption value="a">Option A</ListboxOption>
@@ -893,7 +893,7 @@ describe('Keyboard interactions', () => {
{ id: 'c', name: 'Option C' },
]
render(svelte`
<Listbox value={myOptions[1]} on:change={console.log}>
<Listbox value={myOptions[1]}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value={myOptions[0]}>Option A</ListboxOption>
@@ -938,7 +938,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option when there are no listbox options at all',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions />
</Listbox>
@@ -962,7 +962,7 @@ describe('Keyboard interactions', () => {
'should focus the first non disabled listbox option when opening with Enter',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -995,7 +995,7 @@ describe('Keyboard interactions', () => {
'should focus the first non disabled listbox option when opening with Enter (jump over multiple disabled ones)',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -1028,7 +1028,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option upon Enter key press, when there are no non-disabled listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -1058,7 +1058,7 @@ describe('Keyboard interactions', () => {
'should be possible to close the listbox with Enter when there is no active listboxoption',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1095,10 +1095,9 @@ describe('Keyboard interactions', () => {
it(
'should be possible to close the listbox with Enter and choose the active listbox option',
suppressConsoleLogs(async () => {
let handleChange = jest.fn()
let value = writable();
let value = writable(null);
render(svelte`
<Listbox value={$value} on:change={(e) => { value.set(e.detail); handleChange(e.detail) } }>
<Listbox bind:value={$value}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1131,9 +1130,8 @@ describe('Keyboard interactions', () => {
assertListboxButton({ state: ListboxState.InvisibleUnmounted })
assertListbox({ state: ListboxState.InvisibleUnmounted })
// Verify we got the change event
expect(handleChange).toHaveBeenCalledTimes(1)
expect(handleChange).toHaveBeenCalledWith('a')
// Verify the value changed
expect(get(value)).toEqual("a");
// Verify the button is focused again
assertActiveElement(getListboxButton())
@@ -1152,7 +1150,7 @@ describe('Keyboard interactions', () => {
'should be possible to open the listbox with Space',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1195,7 +1193,7 @@ describe('Keyboard interactions', () => {
'should not be possible to open the listbox with Space when the button is disabled',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log} disabled>
<Listbox value={undefined} disabled>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1230,7 +1228,7 @@ describe('Keyboard interactions', () => {
'should be possible to open the listbox with Space, and focus the selected option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value="b" on:change={console.log}>
<Listbox value="b">
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1275,7 +1273,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option when there are no listbox options at all',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions />
</Listbox>
@@ -1299,7 +1297,7 @@ describe('Keyboard interactions', () => {
'should focus the first non disabled listbox option when opening with Space',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -1332,7 +1330,7 @@ describe('Keyboard interactions', () => {
'should focus the first non disabled listbox option when opening with Space (jump over multiple disabled ones)',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -1365,7 +1363,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option upon Space key press, when there are no non-disabled listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -1394,10 +1392,9 @@ describe('Keyboard interactions', () => {
it(
'should be possible to close the listbox with Space and choose the active listbox option',
suppressConsoleLogs(async () => {
let handleChange = jest.fn()
let value = writable();
let value = writable(null);
render(svelte`
<Listbox value={$value} on:change={(e) => { value.set(e.detail); handleChange(e.detail) } }>
<Listbox bind:value={$value}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1431,9 +1428,8 @@ describe('Keyboard interactions', () => {
assertListboxButton({ state: ListboxState.InvisibleUnmounted })
assertListbox({ state: ListboxState.InvisibleUnmounted })
// Verify we got the change event
expect(handleChange).toHaveBeenCalledTimes(1)
expect(handleChange).toHaveBeenCalledWith('a')
// Verify the value changed
expect(get(value)).toEqual("a");
// Verify the button is focused again
assertActiveElement(getListboxButton())
@@ -1452,7 +1448,7 @@ describe('Keyboard interactions', () => {
'should be possible to close an open listbox with Escape',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1495,7 +1491,7 @@ describe('Keyboard interactions', () => {
'should focus trap when we use Tab',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1546,7 +1542,7 @@ describe('Keyboard interactions', () => {
'should focus trap when we use Shift+Tab',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1599,7 +1595,7 @@ describe('Keyboard interactions', () => {
'should be possible to open the listbox with ArrowDown',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1643,7 +1639,7 @@ describe('Keyboard interactions', () => {
'should not be possible to open the listbox with ArrowDown when the button is disabled',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log} disabled>
<Listbox value={undefined} disabled>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1678,7 +1674,7 @@ describe('Keyboard interactions', () => {
'should be possible to open the listbox with ArrowDown, and focus the selected option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value="b" on:change={console.log}>
<Listbox value="b">
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1723,7 +1719,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option when there are no listbox options at all',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions />
</Listbox>
@@ -1747,7 +1743,7 @@ describe('Keyboard interactions', () => {
'should be possible to use ArrowDown to navigate the listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1792,7 +1788,7 @@ describe('Keyboard interactions', () => {
'should be possible to use ArrowDown to navigate the listbox options and skip the first disabled one',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -1830,7 +1826,7 @@ describe('Keyboard interactions', () => {
'should be possible to use ArrowDown to navigate the listbox options and jump to the first non-disabled one',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -1866,7 +1862,7 @@ describe('Keyboard interactions', () => {
'should be possible to use ArrowRight to navigate the listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log} horizontal>
<Listbox value={undefined} horizontal>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1914,7 +1910,7 @@ describe('Keyboard interactions', () => {
'should be possible to open the listbox with ArrowUp and the last option should be active',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1959,7 +1955,7 @@ describe('Keyboard interactions', () => {
'should not be possible to open the listbox with ArrowUp and the last option should be active when the button is disabled',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log} disabled>
<Listbox value={undefined} disabled>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -1994,7 +1990,7 @@ describe('Keyboard interactions', () => {
'should be possible to open the listbox with ArrowUp, and focus the selected option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value="b" on:change={console.log}>
<Listbox value="b">
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2039,7 +2035,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option when there are no listbox options at all',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions />
</Listbox>
@@ -2063,7 +2059,7 @@ describe('Keyboard interactions', () => {
'should be possible to use ArrowUp to navigate the listbox options and jump to the first non-disabled one',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2097,7 +2093,7 @@ describe('Keyboard interactions', () => {
'should not be possible to navigate up or down if there is only a single non-disabled option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -2139,7 +2135,7 @@ describe('Keyboard interactions', () => {
'should be possible to use ArrowUp to navigate the listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2196,7 +2192,7 @@ describe('Keyboard interactions', () => {
'should be possible to use ArrowLeft to navigate the listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log} horizontal>
<Listbox value={undefined} horizontal>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2254,7 +2250,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the End key to go to the last listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2285,7 +2281,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the End key to go to the last non disabled listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2317,7 +2313,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the End key to go to the first listbox option if that is the only non-disabled listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2346,7 +2342,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option upon End key press, when there are no non-disabled listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -2376,7 +2372,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the PageDown key to go to the last listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2407,7 +2403,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the PageDown key to go to the last non disabled listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2439,7 +2435,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the PageDown key to go to the first listbox option if that is the only non-disabled listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2468,7 +2464,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option upon PageDown key press, when there are no non-disabled listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -2498,7 +2494,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the Home key to go to the first listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2529,7 +2525,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the Home key to go to the first non disabled listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -2560,7 +2556,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the Home key to go to the last listbox option if that is the only non-disabled listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -2589,7 +2585,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option upon Home key press, when there are no non-disabled listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -2619,7 +2615,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the PageUp key to go to the first listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -2650,7 +2646,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the PageUp key to go to the first non disabled listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -2681,7 +2677,7 @@ describe('Keyboard interactions', () => {
'should be possible to use the PageUp key to go to the last listbox option if that is the only non-disabled listbox option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -2710,7 +2706,7 @@ describe('Keyboard interactions', () => {
'should have no active listbox option upon PageUp key press, when there are no non-disabled listbox options',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a" disabled>Option A</ListboxOption>
@@ -2740,7 +2736,7 @@ describe('Keyboard interactions', () => {
'should be possible to type a full word that has a perfect match',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="alice">alice</ListboxOption>
@@ -2773,7 +2769,7 @@ describe('Keyboard interactions', () => {
'should be possible to type a partial of a word',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="alice">alice</ListboxOption>
@@ -2812,7 +2808,7 @@ describe('Keyboard interactions', () => {
'should be possible to type words with spaces',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">value a</ListboxOption>
@@ -2851,7 +2847,7 @@ describe('Keyboard interactions', () => {
'should not be possible to search for a disabled option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="alice">alice</ListboxOption>
@@ -2884,7 +2880,7 @@ describe('Keyboard interactions', () => {
'should be possible to search for a word (case insensitive)',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="alice">alice</ListboxOption>
@@ -2917,7 +2913,7 @@ describe('Keyboard interactions', () => {
'should be possible to search for the next occurence',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">alice</ListboxOption>
@@ -2960,7 +2956,7 @@ describe('Mouse interactions', () => {
'should focus the ListboxButton when we click the ListboxLabel',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxLabel>Label</ListboxLabel>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
@@ -2986,7 +2982,7 @@ describe('Mouse interactions', () => {
'should not focus the ListboxButton when we right click the ListboxLabel',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxLabel>Label</ListboxLabel>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
@@ -3012,7 +3008,7 @@ describe('Mouse interactions', () => {
'should be possible to open the listbox on click',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3051,7 +3047,7 @@ describe('Mouse interactions', () => {
'should not be possible to open the listbox on right click',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3079,7 +3075,7 @@ describe('Mouse interactions', () => {
'should not be possible to open the listbox on click when the button is disabled',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log} disabled>
<Listbox value={undefined} disabled>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3111,7 +3107,7 @@ describe('Mouse interactions', () => {
'should be possible to open the listbox on click, and focus the selected option',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value="b" on:change={console.log}>
<Listbox value="b">
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3153,7 +3149,7 @@ describe('Mouse interactions', () => {
'should be possible to close a listbox on click',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3182,7 +3178,7 @@ describe('Mouse interactions', () => {
'should be a no-op when we click outside of a closed listbox',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3207,7 +3203,7 @@ describe('Mouse interactions', () => {
'should be possible to click outside of the listbox which should close the listbox',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3238,7 +3234,7 @@ describe('Mouse interactions', () => {
suppressConsoleLogs(async () => {
render(svelte`
<div>
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3246,7 +3242,7 @@ describe('Mouse interactions', () => {
<ListboxOption value="c">Option C</ListboxOption>
</ListboxOptions>
</Listbox>
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3280,7 +3276,7 @@ describe('Mouse interactions', () => {
'should be possible to click outside of the listbox which should close the listbox (even if we press the listbox button)',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3313,7 +3309,7 @@ describe('Mouse interactions', () => {
let focusFn = jest.fn()
render(svelte`
<div>
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton on:focus={focusFn}>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3351,7 +3347,7 @@ describe('Mouse interactions', () => {
'should be possible to hover an option and make it active',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3383,7 +3379,7 @@ describe('Mouse interactions', () => {
'should make a listbox option active when you move the mouse over it',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3407,7 +3403,7 @@ describe('Mouse interactions', () => {
'should be a no-op when we move the mouse and the listbox option is already active',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3437,7 +3433,7 @@ describe('Mouse interactions', () => {
'should be a no-op when we move the mouse and the listbox option is disabled',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3461,7 +3457,7 @@ describe('Mouse interactions', () => {
'should not be possible to hover an option that is disabled',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3488,7 +3484,7 @@ describe('Mouse interactions', () => {
'should be possible to mouse leave an option and make it inactive',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3530,7 +3526,7 @@ describe('Mouse interactions', () => {
'should be possible to mouse leave a disabled option and be a no-op',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3557,10 +3553,9 @@ describe('Mouse interactions', () => {
it(
'should be possible to click a listbox option, which closes the listbox',
suppressConsoleLogs(async () => {
let handleChange = jest.fn()
let value = writable();
let value = writable(null);
render(svelte`
<Listbox value={$value} on:change={(e) => { value.set(e.detail); handleChange(e.detail) } }>
<Listbox bind:value={$value}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3580,8 +3575,7 @@ describe('Mouse interactions', () => {
// We should be able to click the first option
await click(options[1])
assertListbox({ state: ListboxState.InvisibleUnmounted })
expect(handleChange).toHaveBeenCalledTimes(1)
expect(handleChange).toHaveBeenCalledWith('b')
expect(get(value)).toEqual("b");
// Verify the button is focused again
assertActiveElement(getListboxButton())
@@ -3597,10 +3591,9 @@ describe('Mouse interactions', () => {
it(
'should be possible to click a disabled listbox option, which is a no-op',
suppressConsoleLogs(async () => {
let handleChange = jest.fn()
let value = writable();
let value = writable(null);
render(svelte`
<Listbox value={$value} on:change={(e) => { value.set(e.detail); handleChange(e.detail) } }>
<Listbox bind:value={$value}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3622,7 +3615,7 @@ describe('Mouse interactions', () => {
await click(options[1])
assertListbox({ state: ListboxState.Visible })
assertActiveElement(getListbox())
expect(handleChange).toHaveBeenCalledTimes(0)
expect(get(value)).toBeNull();
// Close the listbox
await click(getListboxButton())
@@ -3639,7 +3632,7 @@ describe('Mouse interactions', () => {
'should be possible focus a listbox option, so that it becomes active',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>
@@ -3669,7 +3662,7 @@ describe('Mouse interactions', () => {
'should not be possible to focus a listbox option which is disabled',
suppressConsoleLogs(async () => {
render(svelte`
<Listbox value={undefined} on:change={console.log}>
<Listbox value={undefined}>
<ListboxButton>Trigger</ListboxButton>
<ListboxOptions>
<ListboxOption value="a">Option A</ListboxOption>

8
src/routes/listbox/_PeopleList.svelte
View File

@@ -32,13 +32,7 @@
<div class="w-64">
<div class="space-y-1">
<Listbox
value={active}
on:change={(event) => {
console.log("value:", event.detail);
active = event.detail;
}}
>
<Listbox bind:value={active}>
<ListboxLabel class="block text-sm font-medium leading-5 text-gray-700">
Assigned to
</ListboxLabel>

7
src/routes/listbox/listbox-with-pure-tailwind.svelte
View File

@@ -32,12 +32,7 @@
<div class="flex justify-center w-screen h-full p-12 bg-gray-50">
<div class="w-full max-w-xs mx-auto">
<div class="space-y-1">
<Listbox
value={active}
on:change={(event) => {
active = event.detail;
}}
>
<Listbox bind:value={active}>
<ListboxLabel class="block text-sm font-medium leading-5 text-gray-700">
Assigned to
</ListboxLabel>