simplesvelte 2.4.4 → 2.4.6

package/dist/Select.svelte

@@ -253,6 +253,89 @@
 
 	let searchEL: HTMLInputElement | undefined = $state(undefined)
 	let popoverEl: HTMLElement | undefined = $state(undefined)
+	let scrollContainerEl: HTMLDivElement | undefined = $state(undefined)
+
+	// Keyboard navigation
+	let highlightedIndex = $state(-1)
+
+	// Get only the option entries from flatList (skip headers)
+	let optionIndices = $derived.by(() => {
+		const indices: number[] = []
+		for (let i = 0; i < flatList.length; i++) {
+			if (flatList[i].type === 'option') indices.push(i)
+		}
+		return indices
+	})
+
+	// Reset highlight when filter changes or dropdown closes
+	$effect(() => {
+		// Track filterInput to reset highlight when user types
+		void filterInput
+		if (!dropdownOpen) {
+			highlightedIndex = -1
+		}
+	})
+
+	// Scroll the virtual list to keep highlighted item visible
+	function scrollToHighlighted(index: number) {
+		if (!scrollContainerEl || index < 0) return
+		const targetTop = index * itemHeight
+		const targetBottom = targetTop + itemHeight
+		const viewTop = scrollContainerEl.scrollTop
+		const viewBottom = viewTop + containerHeight
+
+		if (targetTop < viewTop) {
+			scrollContainerEl.scrollTop = targetTop
+		} else if (targetBottom > viewBottom) {
+			scrollContainerEl.scrollTop = targetBottom - containerHeight
+		}
+	}
+
+	// Keyboard handler for arrow navigation
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'ArrowDown') {
+			e.preventDefault()
+			if (!dropdownOpen) {
+				openDropdown()
+				return
+			}
+			// Move to next option
+			const currentPos = optionIndices.indexOf(highlightedIndex)
+			const nextPos = currentPos + 1
+			if (nextPos < optionIndices.length) {
+				highlightedIndex = optionIndices[nextPos]
+				scrollToHighlighted(highlightedIndex)
+			}
+		} else if (e.key === 'ArrowUp') {
+			e.preventDefault()
+			if (!dropdownOpen) {
+				openDropdown()
+				return
+			}
+			// Move to previous option
+			const currentPos = optionIndices.indexOf(highlightedIndex)
+			const prevPos = currentPos - 1
+			if (prevPos >= 0) {
+				highlightedIndex = optionIndices[prevPos]
+				scrollToHighlighted(highlightedIndex)
+			}
+		} else if (e.key === 'Enter') {
+			e.preventDefault()
+			if (!dropdownOpen) {
+				openDropdown()
+				return
+			}
+			if (highlightedIndex >= 0) {
+				const entry = flatList[highlightedIndex]
+				if (entry && entry.type === 'option') {
+					toggleItemSelection(entry.item.value)
+					if (multiple) searchEL?.focus()
+				}
+			}
+		} else if (e.key === 'Escape') {
+			closeDropdown()
+		}
+	}
 
 	// Virtual list implementation
 	let scrollTop = $state(0)
@@ -405,6 +488,7 @@
 			aria-expanded={dropdownOpen}
 			aria-haspopup="listbox"
 			aria-controls={popoverId}
+			tabindex="-1"
 			class="select relative h-max min-h-10 w-full min-w-12 cursor-pointer bg-none! pr-1 text-left"
 			style="anchor-name: {anchorName}"
 			title={tooltipText}
@@ -412,11 +496,6 @@
 				searchEL?.focus()
 				// Only clear filter in single-select mode; in multi-select, keep filter for continued searching
 				if (!multiple) filterInput = ''
-			}}
-			onkeydown={(e) => {
-				if (e.key === 'Escape') {
-					closeDropdown()
-				}
 			}}>
 			{#if multiple}
 				<!-- Multi-select display with condensed chips -->
@@ -424,21 +503,15 @@
 					{#if selectedItems.length > 0}
 						<!-- Show first selected item -->
 						<div class="badge badge-neutral bg-base-200 text-base-content gap-1">
-							<span class="max-w-[200px] truncate">{selectedItems[0].label}</span>
+							<span class="max-w-50 truncate">{selectedItems[0].label}</span>
+							<!-- svelte-ignore a11y_click_events_have_key_events -->
 							<span
 								role="button"
-								tabindex="0"
+								tabindex="-1"
 								class="btn btn-xs btn-circle btn-ghost hover:bg-base-300"
 								onclick={(e) => {
 									e.stopPropagation()
 									removeSelectedItem(selectedItems[0].value)
-								}}
-								onkeydown={(e) => {
-									if (e.key === 'Enter' || e.key === ' ') {
-										e.preventDefault()
-										e.stopPropagation()
-										removeSelectedItem(selectedItems[0].value)
-									}
 								}}>
 								✕
 							</span>
@@ -453,11 +526,12 @@
 					{/if}
 					<!-- Search input for filtering in multi-select -->
 					<input
-						type="text"
-						class="h-full min-w-[120px] flex-1 outline-0 {dropdownOpen ? 'cursor-text' : 'cursor-pointer'}"
-						bind:this={searchEL}
-						bind:value={filterInput}
-						onclick={() => openDropdown()}
+					type="text"
+					class="h-full min-w-30 flex-1 outline-0 {dropdownOpen ? 'cursor-text' : 'cursor-pointer'}"
+					bind:this={searchEL}
+					bind:value={filterInput}
+					onclick={() => openDropdown()}
+					onkeydown={handleKeydown}
 						placeholder="Search..."
 						required={required && (!Array.isArray(normalizedValue) || normalizedValue.length === 0)} />
 				</div>
@@ -473,28 +547,23 @@
 						filterInput = ''
 						openDropdown()
 					}}
+					onkeydown={handleKeydown}
 					{placeholder}
 					required={required && !normalizedValue} />
 			{/if}
 			{#if !required && ((multiple && Array.isArray(normalizedValue) && normalizedValue.length > 0) || (!multiple && normalizedValue))}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
 				<span
 					role="button"
-					tabindex="0"
+					tabindex="-1"
 					class="btn btn-sm btn-circle btn-ghost bg-base-100 absolute top-1 right-1"
 					onclick={(e) => {
 						e.preventDefault()
 						e.stopPropagation()
 						clearAll()
-					}}
-					onkeydown={(e) => {
-						if (e.key === 'Enter' || e.key === ' ') {
-							e.preventDefault()
-							e.stopPropagation()
-							clearAll()
-						}
 					}}>
 					✕
-			</span>
+				</span>
 			{/if}
 		</button>
 
@@ -504,8 +573,9 @@
 			id={popoverId}
 			popover
 			role="listbox"
-			class="dropdown menu bg-base-100 rounded-box z-50 mt-2 flex flex-col flex-nowrap gap-1 p-2 shadow outline m-0 {!dropdownOpen ? 'pointer-events-none' : ''}"
-			style="position-anchor: {anchorName}; position: fixed; top: anchor(bottom); left: anchor(left); width: anchor-size(width)"
+			inert={!dropdownOpen}
+			class="dropdown menu bg-base-100 rounded-box z-50 flex flex-col flex-nowrap gap-1 p-2 shadow outline m-0"
+			style="position-anchor: {anchorName}; position: fixed; top: anchor(bottom); left: anchor(left); width: anchor-size(width); margin-block: 0.5rem; position-try-fallbacks: flip-block;"
 			ontoggle={handlePopoverToggle}>
 			{#if multiple && filteredItems.length > 1}
 					<!-- Select All / Clear All options for multi-select -->
@@ -543,7 +613,7 @@
 				{/if}
 
 				{#if flatList.length > 0}
-					<div class="relative max-h-80 overflow-y-auto pr-2" use:scrollToSelected onscroll={handleScroll}>
+					<div class="relative max-h-80 overflow-y-auto pr-2" bind:this={scrollContainerEl} use:scrollToSelected onscroll={handleScroll}>
 					<!-- Virtual spacer for items before visible range -->
 					{#if visibleItems.startIndex > 0}
 						<div style="height: {visibleItems.startIndex * itemHeight}px;"></div>
@@ -559,14 +629,16 @@
 							</li>
 						{:else}
 							{@const item = entry.item}
+							{@const flatIdx = visibleItems.startIndex + idx}
 							{@const isSelected = multiple
 								? Array.isArray(normalizedValue) && normalizedValue.includes(item.value)
 								: item.value === normalizedValue}
+							{@const isHighlighted = flatIdx === highlightedIndex}
 							<li style="height: {itemHeight}px;" role="option" aria-selected={isSelected}>
 								<button
 									class="flex h-full w-full items-center gap-2 {isSelected
 										? ' bg-primary text-primary-content hover:bg-primary/70!'
-										: ''}"
+										: ''} {isHighlighted && !isSelected ? 'bg-base-200' : ''}"
 									type="button"
 									onclick={(e) => {
 										e.stopPropagation()
@@ -576,6 +648,7 @@
 									{#if multiple}
 										<input
 											type="checkbox"
+											tabindex="-1"
 											class="checkbox checkbox-sm text-primary-content! pointer-events-none"
 											checked={isSelected}
 											readonly />

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "simplesvelte",
-	"version": "2.4.4",
+	"version": "2.4.6",
 	"scripts": {
 		"dev": "bun vite dev",
 		"build": "bun vite build && bun run prepack",