feat(web): rework combobox and add clear button (#7317)

* feat(web): rework combobox

* simplify statement and use transition-all

web/src/lib/components/shared-components/change-date.svelte

@@ -28,7 +28,7 @@
 
   const initialOption = timezones.find((item) => item.value === 'UTC' + initialDate.toFormat('ZZ'));
 
-  let selectedOption = {
+  let selectedOption = initialOption && {
     label: initialOption?.label || '',
     value: initialOption?.value || '',
   };
@@ -36,7 +36,7 @@
   let selectedDate = initialDate.toFormat("yyyy-MM-dd'T'HH:mm");
 
   // Keep local time if not it's really confusing
-  $: date = DateTime.fromISO(selectedDate).setZone(selectedOption.value, { keepLocalTime: true });
+  $: date = DateTime.fromISO(selectedDate).setZone(selectedOption?.value, { keepLocalTime: true });
 
   const dispatch = createEventDispatcher<{
     cancel: void;
@@ -82,7 +82,7 @@
       </div>
       <div class="flex flex-col w-full mt-2">
         <label for="timezone">Timezone</label>
-        <Combobox bind:selectedOption options={timezones} placeholder="Search timezone..." />
+        <Combobox bind:selectedOption id="timezone" options={timezones} placeholder="Search timezone..." />
       </div>
     </div>
   </ConfirmDialogue>

web/src/lib/components/shared-components/combobox.svelte

@@ -1,12 +1,7 @@
 <script lang="ts" context="module">
-  // Necessary for eslint
-  /* eslint-disable @typescript-eslint/no-explicit-any */
-  type T = any;
-
-  export type Type = 'button' | 'submit' | 'reset';
   export type ComboBoxOption = {
     label: string;
-    value: T;
+    value: string;
   };
 </script>
 
@@ -15,34 +10,32 @@
 
   import Icon from '$lib/components/elements/icon.svelte';
   import { clickOutside } from '$lib/utils/click-outside';
-  import { mdiMagnify, mdiUnfoldMoreHorizontal } from '@mdi/js';
+  import { mdiMagnify, mdiUnfoldMoreHorizontal, mdiClose } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
+  import IconButton from '../elements/buttons/icon-button.svelte';
 
-  export let type: Type = 'button';
+  export let id: string | undefined = undefined;
   export let options: ComboBoxOption[] = [];
-  export let selectedOption: ComboBoxOption | undefined = undefined;
+  export let selectedOption: ComboBoxOption | undefined;
   export let placeholder = '';
-  export const label = '';
-  export let noLabel = false;
 
   let isOpen = false;
-  let searchQuery = '';
+  let searchQuery = selectedOption?.label || '';
 
   $: filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchQuery.toLowerCase()));
 
   const dispatch = createEventDispatcher<{
-    select: ComboBoxOption;
+    select: ComboBoxOption | undefined;
     click: void;
   }>();
 
-  let handleClick = () => {
+  const handleClick = () => {
     searchQuery = '';
-    isOpen = !isOpen;
+    isOpen = true;
     dispatch('click');
   };
 
   let handleOutClick = () => {
-    searchQuery = '';
     isOpen = false;
   };
 
@@ -51,49 +44,77 @@
     dispatch('select', option);
     isOpen = false;
   };
+
+  const onClear = () => {
+    selectedOption = undefined;
+    searchQuery = '';
+    dispatch('select', selectedOption);
+  };
 </script>
 
 <div class="relative" use:clickOutside on:outclick={handleOutClick}>
-  <button {type} class="immich-form-input text-sm text-left w-full min-h-[48px] transition-all" on:click={handleClick}
-    >{#if !noLabel}
-      {selectedOption?.label || ''}
+  <div>
+    {#if isOpen}
+      <div class="absolute inset-y-0 left-0 flex items-center pl-3">
+        <div class="dark:text-immich-dark-fg/75">
+          <Icon path={mdiMagnify} />
+        </div>
+      </div>
     {/if}
-    <div class="absolute right-0 top-0 h-full flex px-4 justify-center items-center content-between">
-      <Icon path={mdiUnfoldMoreHorizontal} />
+
+    <input
+      {id}
+      {placeholder}
+      role="combobox"
+      aria-expanded={isOpen}
+      aria-controls={id}
+      class="immich-form-input text-sm text-left w-full !pr-12 transition-all"
+      class:!pl-8={isOpen}
+      class:!rounded-b-none={isOpen}
+      class:cursor-pointer={!isOpen}
+      value={isOpen ? '' : selectedOption?.label || ''}
+      on:input={(e) => (searchQuery = e.currentTarget.value)}
+      on:focus={handleClick}
+    />
+
+    <div
+      class="absolute right-0 top-0 h-full flex px-4 justify-center items-center content-between"
+      class:pr-2={selectedOption}
+      class:pointer-events-none={!selectedOption}
+    >
+      {#if selectedOption}
+        <IconButton color="transparent-gray" on:click={onClear} title="Clear value">
+          <Icon path={mdiClose} />
+        </IconButton>
+      {:else if !isOpen}
+        <Icon path={mdiUnfoldMoreHorizontal} />
+      {/if}
     </div>
-  </button>
+  </div>
 
   {#if isOpen}
     <div
-      transition:fly={{ y: -25, duration: 250 }}
-      class="absolute w-full top-full mt-2 bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-900 z-10"
+      role="listbox"
+      transition:fly={{ duration: 250 }}
+      class="absolute text-left w-full max-h-64 overflow-y-auto bg-white dark:bg-gray-800 rounded-b-lg border border-t-0 border-gray-300 dark:border-gray-900 z-10"
     >
-      <div class="relative border-b flex">
-        <div class="absolute inset-y-0 left-0 flex items-center pl-3">
-          <div class="dark:text-immich-dark-fg/75">
-            <button {type} class="flex items-center">
-              <Icon path={mdiMagnify} />
-            </button>
-          </div>
-        </div>
-
-        <!-- svelte-ignore a11y-autofocus -->
-        <input bind:value={searchQuery} autofocus {placeholder} class="ml-9 grow bg-transparent py-2" />
-      </div>
-      <div class="h-64 overflow-y-auto">
-        {#each filteredOptions as option (option.label)}
-          <button
-            {type}
-            class="block text-left w-full px-4 py-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-all
-           ${option.label === selectedOption?.label ? 'bg-gray-300 dark:bg-gray-600' : ''}
-          "
-            class:bg-gray-300={option.label === selectedOption?.label}
-            on:click={() => handleSelect(option)}
-          >
-            {option.label}
-          </button>
-        {/each}
-      </div>
+      {#if filteredOptions.length === 0}
+        <div class="px-4 py-2 font-medium">No results</div>
+      {/if}
+      {#each filteredOptions as option (option.label)}
+        {@const selected = option.label === selectedOption?.label}
+        <button
+          type="button"
+          role="option"
+          aria-selected={selected}
+          class="text-left w-full px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all"
+          class:bg-gray-300={selected}
+          class:dark:bg-gray-600={selected}
+          on:click={() => handleSelect(option)}
+        >
+          {option.label}
+        </button>
+      {/each}
     </div>
   {/if}
 </div>

web/src/lib/components/shared-components/search-bar/search-filter-box.svelte

@@ -404,8 +404,9 @@
 
       <div class="flex justify-between gap-5 mt-3">
         <div class="w-full">
-          <p class="text-sm text-black dark:text-white">Country</p>
+          <label class="text-sm text-black dark:text-white" for="search-place-country">Country</label>
           <Combobox
+            id="search-place-country"
             options={suggestions.country}
             bind:selectedOption={filter.location.country}
             placeholder="Search country..."
@@ -414,8 +415,9 @@
         </div>
 
         <div class="w-full">
-          <p class="text-sm text-black dark:text-white">State</p>
+          <label class="text-sm text-black dark:text-white" for="search-place-state">State</label>
           <Combobox
+            id="search-place-state"
             options={suggestions.state}
             bind:selectedOption={filter.location.state}
             placeholder="Search state..."
@@ -424,8 +426,9 @@
         </div>
 
         <div class="w-full">
-          <p class="text-sm text-black dark:text-white">City</p>
+          <label class="text-sm text-black dark:text-white" for="search-place-city">City</label>
           <Combobox
+            id="search-place-city"
             options={suggestions.city}
             bind:selectedOption={filter.location.city}
             placeholder="Search city..."
@@ -446,8 +449,9 @@
 
       <div class="flex justify-between gap-5 mt-3">
         <div class="w-full">
-          <p class="text-sm text-black dark:text-white">Make</p>
+          <label class="text-sm text-black dark:text-white" for="search-camera-make">Make</label>
           <Combobox
+            id="search-camera-make"
             options={suggestions.make}
             bind:selectedOption={filter.camera.make}
             placeholder="Search camera make..."
@@ -457,8 +461,9 @@
         </div>
 
         <div class="w-full">
-          <p class="text-sm text-black dark:text-white">Model</p>
+          <label class="text-sm text-black dark:text-white" for="search-camera-model">Model</label>
           <Combobox
+            id="search-camera-model"
             options={suggestions.model}
             bind:selectedOption={filter.camera.model}
             placeholder="Search camera model..."