fix(web): broken search-bar during page load (immich-app#3548)

* fix: broken search-bar during page load * fix: prevent race condition between go back and close search bar
hoangthedo · Aug 5, 2023 · f1b9271 · f1b9271
1 parent 1f64649
commit f1b9271
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 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
@@ -3,7 +3,7 @@
   import Magnify from 'svelte-material-icons/Magnify.svelte';
   import Close from 'svelte-material-icons/Close.svelte';
   import { goto } from '$app/navigation';
-  import { isSearchEnabled, savedSearchTerms } from '$lib/stores/search.store';
+  import { isSearchEnabled, preventRaceConditionSearchBar, savedSearchTerms } from '$lib/stores/search.store';
   import { fly } from 'svelte/transition';
   import { clickOutside } from '$lib/utils/click-outside';
   export let value = '';
@@ -23,8 +23,8 @@
       searchValue = value.slice(2);
     }
 
-    $savedSearchTerms = $savedSearchTerms.filter((item) => item !== searchValue);
-    saveSearchTerm(searchValue);
+    $savedSearchTerms = $savedSearchTerms.filter((item) => item !== value);
+    saveSearchTerm(value);
 
     const params = new URLSearchParams({
       q: searchValue,
@@ -59,12 +59,16 @@
   };
 
   const onFocusOut = () => {
+    if ($isSearchEnabled) {
+      $preventRaceConditionSearchBar = true;
+    }
+
     showBigSearchBar = false;
     $isSearchEnabled = false;
   };
 </script>
 
-<button class="w-full" use:clickOutside on:outclick={onFocusOut}>
+<div role="button" class="w-full" use:clickOutside on:outclick={onFocusOut}>
   <form
     draggable="false"
     autocomplete="off"
@@ -160,4 +164,4 @@
       </div>
     {/if}
   </form>
-</button>
+</div>
diff --git a/web/src/lib/stores/search.store.ts b/web/src/lib/stores/search.store.ts
@@ -3,3 +3,4 @@ import { writable } from 'svelte/store';
 
 export const savedSearchTerms = persisted<string[]>('search-terms', [], {});
 export const isSearchEnabled = writable<boolean>(false);
+export const preventRaceConditionSearchBar = writable<boolean>(false);
diff --git a/web/src/routes/(user)/search/+page.svelte b/web/src/routes/(user)/search/+page.svelte
@@ -26,6 +26,7 @@
   import { onDestroy, onMount } from 'svelte';
   import { browser } from '$app/environment';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
+  import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
 
   export let data: PageData;
 
@@ -53,7 +54,10 @@
     if (!$showAssetViewer) {
       switch (event.key) {
         case 'Escape':
-          goto(previousRoute);
+          if (!$preventRaceConditionSearchBar) {
+            goto(previousRoute);
+          }
+          $preventRaceConditionSearchBar = false;
           return;
       }
     }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,4 @@ import { writable } from 'svelte/store';

		export const savedSearchTerms = persisted<string[]>('search-terms', [], {});
		export const isSearchEnabled = writable<boolean>(false);
		export const preventRaceConditionSearchBar = writable<boolean>(false);