From 13b2b2fc4ed1b0d7efcc709505223e95d8a934e1 Mon Sep 17 00:00:00 2001
From: martin <74269598+martabal@users.noreply.github.com>
Date: Fri, 28 Jul 2023 05:06:42 +0200
Subject: [PATCH] fix(web): clickable items in the searchbar (#3441)

---
 .../search-bar/search-bar.svelte              | 151 +++++++++---------
 1 file changed, 76 insertions(+), 75 deletions(-)

diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index f5c4be56a1..8370793166 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -5,6 +5,7 @@
   import { goto } from '$app/navigation';
   import { isSearchEnabled, savedSearchTerms } from '$lib/stores/search.store';
   import { fly } from 'svelte/transition';
+  import { clickOutside } from '$lib/utils/click-outside';
   export let value = '';
   export let grayTheme: boolean;
 
@@ -55,85 +56,85 @@
   };
 </script>
 
-<form
-  draggable="false"
-  autocomplete="off"
-  class="relative text-sm"
-  action={AppRoute.SEARCH}
-  on:reset={() => (value = '')}
-  on:submit|preventDefault={() => onSearch(true)}
-  on:focusin={onFocusIn}
-  on:focusout={onFocusOut}
->
-  <label>
-    <div class="absolute inset-y-0 left-0 flex items-center pl-6">
-      <div class="pointer-events-none dark:text-immich-dark-fg/75">
-        <Magnify size="1.5em" />
+<button class="w-full" use:clickOutside on:outclick={onFocusOut} on:click={onFocusIn}>
+  <form
+    draggable="false"
+    autocomplete="off"
+    class="relative select-text text-sm"
+    action={AppRoute.SEARCH}
+    on:reset={() => (value = '')}
+    on:submit|preventDefault={() => onSearch(true)}
+  >
+    <label>
+      <div class="absolute inset-y-0 left-0 flex items-center pl-6">
+        <div class="pointer-events-none dark:text-immich-dark-fg/75">
+          <Magnify size="1.5em" />
+        </div>
       </div>
-    </div>
-    <input
-      type="text"
-      name="q"
-      class="w-full transition-all {grayTheme
-        ? 'dark:bg-immich-dark-gray'
-        : 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {showBigSearchBar
-        ? '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
-    />
-  </label>
-  {#if showClearIcon}
-    <div class="absolute inset-y-0 right-0 flex items-center pr-4">
-      <button
-        type="reset"
-        class="rounded-full p-2 hover:bg-immich-primary/5 active:bg-immich-primary/10 dark:text-immich-dark-fg/75 dark:hover:bg-immich-dark-primary/25 dark:active:bg-immich-dark-primary/[.35]"
+      <input
+        type="text"
+        name="q"
+        class="w-full transition-all {grayTheme
+          ? 'dark:bg-immich-dark-gray'
+          : 'dark:bg-immich-dark-bg'} px-14 py-4 text-immich-fg/75 dark:text-immich-dark-fg {showBigSearchBar
+          ? '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
+      />
+    </label>
+    {#if showClearIcon}
+      <div class="absolute inset-y-0 right-0 flex items-center pr-4">
+        <button
+          type="reset"
+          class="rounded-full p-2 hover:bg-immich-primary/5 active:bg-immich-primary/10 dark:text-immich-dark-fg/75 dark:hover:bg-immich-dark-primary/25 dark:active:bg-immich-dark-primary/[.35]"
+        >
+          <Close size="1.5em" />
+        </button>
+      </div>
+    {/if}
+
+    {#if showBigSearchBar}
+      <div
+        transition:fly={{ y: 25, duration: 250 }}
+        class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
       >
-        <Close size="1.5em" />
-      </button>
-    </div>
-  {/if}
+        <div class="flex px-5 pt-5 text-left text-xs">
+          <p>
+            Smart search is enabled by default, to search for metadata use the syntax <span
+              class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary"
+              >m:your-search-term</span
+            >
+          </p>
+        </div>
 
-  {#if showBigSearchBar}
-    <div
-      transition:fly={{ y: 25, duration: 250 }}
-      class="absolute w-full rounded-b-3xl border border-gray-200 bg-white pb-5 shadow-2xl transition-all dark:border-gray-800 dark:bg-immich-dark-gray dark:text-gray-300"
-    >
-      <div class="px-5 pt-5 text-xs">
-        <p>
-          Smart search is enabled by default, to search for metadata use the syntax <span
-            class="rounded-lg bg-gray-100 p-2 font-mono font-semibold leading-7 text-immich-primary dark:bg-gray-900 dark:text-immich-dark-primary"
-            >m:your-search-term</span
-          >
-        </p>
-      </div>
+        {#if $savedSearchTerms.length > 0}
+          <div class="flex justify-between px-5 pt-5 text-xs">
+            <p>RECENT SEARCHES</p>
+            <button
+              type="button"
+              class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary"
+              on:click={clearSearchTerm}>Clear all</button
+            >
+          </div>
+        {/if}
 
-      {#if $savedSearchTerms.length > 0}
-        <div class="flex justify-between px-5 pt-5 text-xs">
-          <p>RECENT SEARCHES</p>
+        {#each $savedSearchTerms as savedSearchTerm, i (i)}
           <button
             type="button"
-            class="rounded-lg p-2 font-semibold text-immich-primary hover:bg-immich-primary/25 dark:text-immich-dark-primary"
-            on:click={clearSearchTerm}>Clear all</button
+            class="flex w-full cursor-pointer gap-3 px-5 py-3 text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10"
+            on:click={() => {
+              value = savedSearchTerm;
+              onSearch(false);
+            }}
           >
-        </div>
-      {/if}
-
-      {#each $savedSearchTerms as savedSearchTerm, i (i)}
-        <button
-          type="button"
-          class="flex w-full cursor-pointer gap-3 px-5 py-3 text-black hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-500/10"
-          on:click={() => {
-            value = savedSearchTerm;
-            onSearch(false);
-          }}
-        >
-          <Magnify size="1.5em" />
-          {savedSearchTerm}
-        </button>
-      {/each}
-    </div>
-  {/if}
-</form>
+            <Magnify size="1.5em" />
+            {savedSearchTerm}
+          </button>
+        {/each}
+      </div>
+    {/if}
+  </form>
+</button>