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

* fix: broken search-bar during page load

* fix: prevent race condition between go back and close search bar

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>

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);

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':
+          if (!$preventRaceConditionSearchBar) {
             goto(previousRoute);
+          }
+          $preventRaceConditionSearchBar = false;
           return;
       }
     }