noph-ui 0.24.11 → 0.24.12

package/dist/autocomplete/AutoComplete.svelte

@@ -74,6 +74,33 @@
 		if (activeIndex >= displayOptions.length) {
 			activeIndex = -1
 		}
+
+		if (menuOpen && activeIndex >= 0) {
+			const id = `${uid}-opt-${activeIndex}`
+			const optEl = document.getElementById(id)
+			if (optEl) {
+				optEl.scrollIntoView({ block: 'nearest' })
+			} else if (useVirtualList && menuElement) {
+				const viewport = menuElement.querySelector(
+					'svelte-virtual-list-viewport',
+				) as HTMLElement | null
+				if (viewport) {
+					let rowHeight = 48
+					const firstRow = viewport.querySelector('[id^="' + uid + '-opt-"]') as HTMLElement | null
+					if (firstRow) {
+						rowHeight = firstRow.offsetHeight || rowHeight
+					}
+					const top = activeIndex * rowHeight
+					const bottom = top + rowHeight
+					const { scrollTop, clientHeight } = viewport
+					if (top < scrollTop) {
+						viewport.scrollTop = top
+					} else if (bottom > scrollTop + clientHeight) {
+						viewport.scrollTop = bottom - clientHeight
+					}
+				}
+			}
+		}
 	})
 </script>
 
@@ -83,6 +110,7 @@
 		softFocus={index === activeIndex}
 		aria-selected={index === activeIndex}
 		role="option"
+		tabindex={-1}
 		onmousedown={(e) => {
 			e.preventDefault()
 		}}

package/dist/select/Select.svelte

@@ -165,7 +165,28 @@
 		focusIndex = Math.min(Math.max(index, 0), options.length - 1)
 		await tick()
 		const el = document.getElementById(`${uid}-opt-${focusIndex}`)
-		;(el as HTMLElement | null)?.focus?.()
+		if (el) {
+			el.focus()
+		} else if (useVirtualList && menuElement) {
+			const viewport = menuElement.querySelector(
+				'svelte-virtual-list-viewport',
+			) as HTMLElement | null
+			if (viewport) {
+				let rowHeight = 48
+				const firstRow = viewport.querySelector('[id^="' + uid + '-opt-"]') as HTMLElement | null
+				if (firstRow) {
+					rowHeight = firstRow.offsetHeight || rowHeight
+				}
+				const top = focusIndex * rowHeight
+				const bottom = top + rowHeight
+				const { scrollTop, clientHeight } = viewport
+				if (top < scrollTop) {
+					viewport.scrollTop = top
+				} else if (bottom > scrollTop + clientHeight) {
+					viewport.scrollTop = bottom - clientHeight
+				}
+			}
+		}
 	}
 
 	const moveFocus = (delta: number) => {
@@ -572,9 +593,6 @@
 			}
 			if (idx < 0) idx = 0
 			focusIndex = idx
-			await tick()
-			const el = document.getElementById(`${uid}-opt-${focusIndex}`)
-			;(el as HTMLElement | null)?.focus?.()
 		} else {
 			menuOpen = false
 			focusIndex = -1
@@ -583,7 +601,17 @@
 	bind:element={menuElement}
 >
 	{#if useVirtualList}
-		<VirtualList height="250px" itemHeight={48} items={options}>
+		<VirtualList
+			height="250px"
+			itemHeight={48}
+			items={options}
+			rendered={({ start, end }) => {
+				if (focusIndex >= start && focusIndex < end) {
+					const el = document.getElementById(`${uid}-opt-${focusIndex}`)
+					el?.focus()
+				}
+			}}
+		>
 			{#snippet row(option, index)}
 				{@render item(option, index)}
 			{/snippet}

package/dist/select/VirtualList.svelte

@@ -10,6 +10,7 @@
 		end?: number
 		row: Snippet<[T, number]>
 		overscan?: number
+		rendered?: (event: { start: number; end: number }) => void
 	}
 
 	let {
@@ -19,7 +20,8 @@
 		start = $bindable(0),
 		end = $bindable(0),
 		row,
-		overscan = 4,
+		overscan = 0,
+		rendered,
 	}: VirtualListProps = $props()
 
 	let height_map: number[] = []
@@ -79,6 +81,8 @@
 
 		bottom = remaining * average_height
 		height_map.length = items.length
+
+		rendered?.({ start, end })
 	}
 
 	async function handle_scroll() {
@@ -151,6 +155,8 @@
 			const d = actual_height - expected_height
 			viewport.scrollTo(0, scrollTop + d)
 		}
+		await tick()
+		rendered?.({ start, end })
 	}
 
 	onMount(() => {

package/dist/select/VirtualList.svelte.d.ts

@@ -9,6 +9,10 @@ declare function $$render<T>(): {
         end?: number;
         row: Snippet<[T, number]>;
         overscan?: number;
+        rendered?: (event: {
+            start: number;
+            end: number;
+        }) => void;
     };
     exports: {};
     bindings: "start" | "end";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.24.11",
+  "version": "0.24.12",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {