Merge pull request #95 from CaptainCodeman/change-event

Use "change" event when selected item changes

Author: CaptainCodeman

README.md

@@ -17,6 +17,10 @@ But also:
 - ✅ Designed to integrate beautifully with Svelte and SvelteKit
 - ✅ Less than 14kB minified / 4kB minified gzipped
 
+## BREAKING CHANGE (v0.0.39)
+
+The latest 0.0.39 release switches to using "change" instead of "select" as the event fired when the selected item changes for semantic correctness and to better match native inputs. Be sure to change listeners from `on:select` to `on:change`!
+
 ## Installation
 
 Install using your package manager of choice, e.g.

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "svelte-headlessui",
 	"description": "HeadlessUI components for Svelte",
-	"version": "0.0.38",
+	"version": "0.0.39",
 	"type": "module",
 	"keywords": [
 		"svelte",

src/docs/03-combobox.md

@@ -47,8 +47,8 @@ Comboboxes are the foundation of accessible autocompletes and command palettes f
 
   const combobox = createCombobox({ label: 'Actions', selected: people[2] })
 
-  function onSelect(e: Event) {
-    console.log('select', (e as CustomEvent).detail)
+  function onChange(e: Event) {
+    console.log('select', (e as CustomEvent).detail.selected)
   }
 
   $: filtered = people.filter((person) =>
@@ -67,7 +67,7 @@ Comboboxes are the foundation of accessible autocompletes and command palettes f
       >
         <input
           use:combobox.input
-          on:select={onSelect}
+          on:change={onChange}
           class="w-full border-none py-2 pl-3 pr-10 leading-5 text-gray-900 focus:ring-0"
           value={$combobox.selected.name}
         />

src/docs/04-combobox-multi.md

@@ -52,7 +52,7 @@ Pass an array to the `selected` property of `createCombobox` to trigger multi-se
 
   const combobox = createCombobox({ label: 'People', selected: [people[2], people[3]] })
 
-  function onSelect(e: Event) {
+  function onChange(e: Event) {
     console.log('select', (e as CustomEvent).detail)
   }
 
@@ -69,7 +69,7 @@ Pass an array to the `selected` property of `createCombobox` to trigger multi-se
     <span class="inline-block w-full rounded-md shadow-sm">
       <button
         use:combobox.button
-        on:select={onSelect}
+        on:change={onChange}
         class="focus:shadow-outline-teal relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left text-sm transition duration-150 ease-in-out focus:border-teal-300 focus:outline-none sm:leading-5"
       >
         <div class="flex flex-wrap gap-2">
@@ -85,7 +85,7 @@ Pass an array to the `selected` property of `createCombobox` to trigger multi-se
           {/each}
           <input
             use:combobox.input
-            on:select={onSelect}
+            on:change={onChange}
             placeholder="Search&hellip;"
             class="w-auto border-none py-1 text-sm leading-5 text-gray-900 focus:ring-0"
           />

src/docs/07-listbox.md

@@ -47,7 +47,7 @@ Listboxes are a great foundation for building custom, accessible select menus fo
 
   const listbox = createListbox({ label: 'Actions', selected: people[2] })
 
-  function onSelect(e: Event) {
+  function onChange(e: Event) {
     console.log('select', (e as CustomEvent).detail)
   }
 </script>
@@ -57,7 +57,7 @@ Listboxes are a great foundation for building custom, accessible select menus fo
     <div class="relative mt-1">
       <button
         use:listbox.button
-        on:select={onSelect}
+        on:change={onChange}
         class="relative w-full cursor-default rounded-lg bg-white py-2 pl-3 pr-10 text-left text-sm shadow-md focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300"
       >
         <span class="block truncate">{$listbox.selected.name}</span>

src/docs/08-listbox-multi.md

@@ -52,7 +52,7 @@ Pass an array to the `selected` property of `createListbox` to trigger multi-sel
 
   const listbox = createListbox({ label: 'Actions', selected: [people[2], people[3]] })
 
-  function onSelect(e: Event) {
+  function onChange(e: Event) {
     console.log('select', (e as CustomEvent).detail)
   }
 </script>
@@ -62,7 +62,7 @@ Pass an array to the `selected` property of `createListbox` to trigger multi-sel
     <span class="inline-block w-full rounded-md shadow-sm">
       <button
         use:listbox.button
-        on:select={onSelect}
+        on:change={onChange}
         class="focus:shadow-outline-orange relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-2 pr-10 text-left text-sm transition duration-150 ease-in-out focus:border-orange-300 focus:outline-none sm:leading-5"
       >
         <div class="flex flex-wrap gap-2">

src/docs/09-menu.md

@@ -41,7 +41,7 @@ Menus offer an easy way to build custom, accessible dropdown components with rob
 
   const menu = createMenu({ label: 'Actions' })
 
-  function onSelect(e: Event) {
+  function onChange(e: Event) {
     console.log('select', (e as CustomEvent).detail)
   }
 
@@ -64,7 +64,7 @@ Menus offer an easy way to build custom, accessible dropdown components with rob
     <div class="relative inline-block text-left">
       <button
         use:menu.button
-        on:select={onSelect}
+        on:change={onChange}
         class="inline-flex w-full justify-center rounded-md bg-black bg-opacity-20 px-4 py-2 text-sm font-medium text-white hover:bg-opacity-30 focus:outline-none focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75"
       >
         Options

src/lib/combobox.ts

@@ -33,7 +33,7 @@ import {
 	removeItem,
 	type ItemOptions,
 	type List,
-	raiseSelectOnChange,
+	raiseChangeOnSelect,
 } from './internal/list'
 import { ensureID } from './internal/new-id'
 import { onClick } from './internal/on-click'
@@ -52,10 +52,12 @@ import { keyEnter } from './internal/key-enter'
 import { keyNavigation } from './internal/key-navigation'
 import { noop } from './internal/noop'
 import { keyBackspaceAllow } from './internal/key-backspace'
+import { onChange } from './internal/on-change'
+import { blockDefaultAction } from './internal/events'
 
 // TODO: add "value" selector, to pick text value off list item objects
 export interface Combobox extends Labelable, Expandable, Controllable, List, Selectable {
-	input?: HTMLElement
+	input?: HTMLInputElement
 	button?: HTMLElement
 	filter: string
 	moved: boolean // whether we have moved active or not (to reset when filtering)
@@ -136,11 +138,21 @@ export function createCombobox(init?: Partial<Combobox>) {
 
 	const setFocusToInput = () => state.input?.focus()
 
+	const setSelecttionToEnd = () => {
+		if (state.input) {
+			state.input.selectionStart = state.input.value.length
+			state.input.selectionEnd = state.input.value.length
+			state.input.focus()
+		}
+	}
+
 	const filter = async (value: string) => {
 		// current active item
 		const current = state.active === -1 ? state.selected : state.items[state.active].value
 
-		set({ filter: value, expanded: true, opened: true }) // keep expanded or expand if filter is set
+		// keep expanded or expand if filter is set
+		// clear selected if input is cleared
+		set({ filter: value, expanded: true, opened: true, selected: value ? state.selected : null })
 
 		await tick()
 
@@ -172,7 +184,7 @@ export function createCombobox(init?: Partial<Combobox>) {
 
 	const select = () => set(selectActive(state))
 
-	function input(node: HTMLElement) {
+	function input(node: HTMLInputElement) {
 		ensureID(node, prefix)
 		set({ input: node })
 
@@ -192,10 +204,11 @@ export function createCombobox(init?: Partial<Combobox>) {
 				keyBackspaceAllow(del),
 			),
 			onInput(filter),
+			onChange(blockDefaultAction),
 			// NOTE: button might be a container of the input, or sibling of the input, depending on multi-select
 			onClick(state.multi ? noop : toggle),
 			focusOnClose(store),
-			raiseSelectOnChange(store),
+			raiseChangeOnSelect(store),
 		])
 
 		return {
@@ -236,7 +249,17 @@ export function createCombobox(init?: Partial<Combobox>) {
 			setTabIndex(-1),
 			onClickOutside(() => (state.expanded ? [state.input, state.button, node] : null), close),
 			onClick(
-				activate('[role="option"]', focusNode, select, state.multi ? setFocusToInput : close),
+				activate(
+					'[role="option"]',
+					focusNode,
+					select,
+					state.multi
+						? setFocusToInput
+						: () => {
+								close()
+								setSelecttionToEnd()
+							},
+				),
 			),
 			onPointerMoveChild('[role="option"]', focusNode),
 			reflectAriaActivedescendent(store),

src/lib/internal/events.ts

@@ -8,3 +8,11 @@ export const listener = <K extends keyof HTMLElementEventMap>(
 	node.addEventListener(type, handler, capture)
 	return () => node.removeEventListener(type, handler, capture)
 }
+
+export const blockDefaultAction = (event: Event) => {
+	if (event.isTrusted) {
+		event.preventDefault()
+		event.stopPropagation()
+		event.stopImmediatePropagation()
+	}
+}

src/lib/internal/key-handler.ts

@@ -1,18 +1,13 @@
 import type { Callable } from './callable'
+import { blockDefaultAction } from './events'
 
 export type KeyHandler = (event: KeyboardEvent) => void
 
-export const blockDefaultKeyAction = (event: KeyboardEvent) => {
-	event.preventDefault()
-	event.stopPropagation()
-	event.stopImmediatePropagation()
-}
-
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const allowDefaultKeyAction = (_event: KeyboardEvent) => {}
 
 export const keyHandler =
-	(matches: string[], action: KeyHandler = blockDefaultKeyAction) =>
+	(matches: string[], action: KeyHandler = blockDefaultAction) =>
 	(...fns: Callable[]): KeyHandler =>
 	(event) => {
 		if (matches.includes(event.key)) {