feat(web): keyboard access for search dropdown, combobox fixes

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

@@ -101,6 +101,7 @@
   };
 
   const onClear = () => {
+    deactivate();
     selectedOption = undefined;
     searchQuery = '';
     dispatch('select', selectedOption);
@@ -110,12 +111,7 @@
 <label class="text-sm text-black dark:text-white" class:sr-only={hideLabel} for={inputId}>{label}</label>
 <div
   class="relative w-full dark:text-gray-300 text-gray-700 text-base"
-  use:clickOutside={{ onOutclick: deactivate }}
-  on:focusout={(e) => {
-    if (e.relatedTarget instanceof Node && !e.currentTarget.contains(e.relatedTarget)) {
-      deactivate();
-    }
-  }}
+  use:clickOutside={{ onOutclick: deactivate, onFocusOut: deactivate }}
 >
   <div>
     {#if isActive}

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

@@ -94,7 +94,7 @@
   }}
 />
 
-<div class="w-full relative" use:clickOutside={{ onOutclick: onFocusOut }}>
+<div class="w-full relative" use:clickOutside={{ onOutclick: onFocusOut, onFocusOut }}>
   <form
     draggable="false"
     autocomplete="off"
@@ -122,11 +122,11 @@
           ? 'rounded-t-3xl border  border-gray-200 bg-white dark:border-gray-800'
           : 'rounded-3xl border border-transparent bg-gray-200'}"
         placeholder="Search your photos"
-        required
         pattern="^(?!m:$).*$"
         bind:value
         bind:this={input}
         on:click={onFocusIn}
+        on:focus={onFocusIn}
         disabled={showFilter}
         use:shortcut={{
           shortcut: { key: 'Escape' },

web/src/lib/utils/click-outside.ts

@@ -11,10 +11,11 @@ interface Attributes {
 interface Options {
   onOutclick?: () => void;
   onEscape?: () => void;
+  onFocusOut?: () => void;
 }
 
 export function clickOutside(node: HTMLElement, options: Options = {}): ActionReturn<void, Attributes> {
-  const { onOutclick, onEscape } = options;
+  const { onOutclick, onEscape, onFocusOut } = options;
 
   const handleClick = (event: MouseEvent) => {
     const targetNode = event.target as Node | null;
@@ -42,13 +43,21 @@ export function clickOutside(node: HTMLElement, options: Options = {}): ActionRe
     }
   };
 
+  const handleFocusOut = (event: FocusEvent) => {
+    if (onFocusOut && event.relatedTarget instanceof Node && !node.contains(event.relatedTarget as Node)) {
+      onFocusOut();
+    }
+  };
+
   document.addEventListener('click', handleClick, true);
   document.addEventListener('keydown', handleKey, true);
+  node.addEventListener('focusout', handleFocusOut);
 
   return {
     destroy() {
       document.removeEventListener('click', handleClick, true);
       document.removeEventListener('keydown', handleKey, true);
+      node.removeEventListener('focusout', handleFocusOut);
     },
   };
 }