wip

src/components/tools/VirtualSelect.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { createEventDispatcher, onMount } from "svelte";
+	import { createEventDispatcher, onMount, tick } from "svelte";
 
 	// Props
 	export let options = [];
@@ -14,7 +14,7 @@
 	let visibleItems = [];
 	let startIndex = 0;
 	let itemHeight = 40; // Fixed height for each option (in pixels)
-	let visibleCount = 10; // Number of items to render (adjusted based on container height)
+	let visibleCount = 10; // Default number of items to render
 	let focusedIndex = -1; // Track the focused option index (-1 means no focus)
 
 	const dispatch = createEventDispatcher();
@@ -50,8 +50,9 @@
 	}
 
 	// Calculate visible item count based on container height
-	function updateVisibleCount() {
+	async function updateVisibleCount() {
 		if (container) {
+			await tick(); // Wait for DOM to render
 			visibleCount = Math.ceil(container.clientHeight / itemHeight) + 2; // Buffer of 2 items
 			updateVisibleItems();
 		}
@@ -67,12 +68,11 @@
 	}
 
 	// Toggle dropdown
-	function toggleDropdown() {
+	async function toggleDropdown() {
 		isOpen = !isOpen;
 		if (isOpen) {
 			// Update visible count when dropdown opens
-			setTimeout(updateVisibleCount, 0); // Ensure container is rendered
-			focusedIndex = -1; // Reset focus when opening
+			await updateVisibleCount(); // Ensure container is rendered
 		}
 	}
 
@@ -85,8 +85,9 @@
 	}
 
 	// Handle input focus to open dropdown
-	function handleInputFocus() {
+	async function handleInputFocus() {
 		isOpen = true;
+		await updateVisibleCount(); // Ensure items render on focus
 	}
 
 	// Handle keyboard navigation