refactor: combobox

immich-app · Nov 4, 2024 · b5de150 · b5de150
1 parent 8f7cb4b
commit b5de150
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 10 deletions.
diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
@@ -18,8 +18,6 @@
 </script>
 
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import { fly } from 'svelte/transition';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
@@ -65,9 +63,8 @@
   let searchQuery = $state(selectedOption?.label || '');
   let selectedIndex: number | undefined = $state();
   let optionRefs: HTMLElement[] = $state([]);
-  let input: HTMLInputElement = $state();
+  let input = $state<HTMLInputElement>();
   let bounds: DOMRect | undefined = $state();
-  let dropdownDirection: 'bottom' | 'top' = $state('bottom');
 
   const inputId = `combobox-${id}`;
   const listboxId = `listbox-${id}`;
@@ -90,8 +87,11 @@
   );
 
   onMount(() => {
+    if (!input) {
+      return;
+    }
     observer.observe(input);
-    const scrollableAncestor = input.closest('.overflow-y-auto, .overflow-y-scroll');
+    const scrollableAncestor = input?.closest('.overflow-y-auto, .overflow-y-scroll');
     scrollableAncestor?.addEventListener('scroll', onPositionChange);
     window.visualViewport?.addEventListener('resize', onPositionChange);
     window.visualViewport?.addEventListener('scroll', onPositionChange);
@@ -162,7 +162,6 @@
 
   const calculatePosition = (boundary: DOMRect | undefined) => {
     const visualViewport = window.visualViewport;
-    dropdownDirection = getComboboxDirection(boundary, visualViewport);
 
     if (!boundary) {
       return;
@@ -217,13 +216,16 @@
   };
 
   const getInputPosition = () => input?.getBoundingClientRect();
-  run(() => {
+
+  $effect(() => {
     searchQuery = selectedOption ? selectedOption.label : '';
   });
+
   let filteredOptions = $derived(
     options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())),
   );
   let position = $derived(calculatePosition(bounds));
+  let dropdownDirection: 'bottom' | 'top' = $derived(getComboboxDirection(bounds, visualViewport));
 </script>
 
 <svelte:window onresize={onPositionChange} />

diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -1,7 +1,4 @@
-<!-- @migration-task Error while migrating Svelte code: `$:` is not allowed in runes mode, use `$derived` or `$effect` instead -->
 <script lang="ts">
-  import { run } from 'svelte/legacy';
-
   import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';