From 79d4ce2d6d8be90528ef386ac7221f089bbd29df Mon Sep 17 00:00:00 2001
From: Ben <45583362+ben-basten@users.noreply.github.com>
Date: Sun, 13 Apr 2025 23:43:50 -0400
Subject: [PATCH] fix(web): search bar deactivates when focus exits (#17549)

* fix(web): search bar deactivates when focus exits

* fix: disable search bar on destroy

For example, on the search page. If the escape key is pressed while the advanced filters button is focused, the search page will close but the search bar will remain activated.
---
 .../search-bar/search-bar.svelte               | 18 ++++++------------
 web/src/lib/stores/search.svelte.ts            |  2 --
 .../[[assetId=id]]/+page.svelte                |  6 +-----
 3 files changed, 7 insertions(+), 19 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 2dc358bad3..a98e2f7882 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
@@ -13,7 +13,7 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { t } from 'svelte-i18n';
   import { generateId } from '$lib/utils/generate-id';
-  import { tick } from 'svelte';
+  import { onDestroy, tick } from 'svelte';
 
   interface Props {
     value?: string;
@@ -35,6 +35,10 @@
 
   const listboxId = generateId();
 
+  onDestroy(() => {
+    searchStore.isSearchEnabled = false;
+  });
+
   const handleSearch = async (payload: SmartSearchDto | MetadataSearchDto) => {
     const params = getMetadataSearchQuery(payload);
 
@@ -70,17 +74,7 @@
   };
 
   const onFocusOut = () => {
-    const focusOutTimer = setTimeout(() => {
-      if (searchStore.isSearchEnabled) {
-        searchStore.preventRaceConditionSearchBar = true;
-      }
-
-      closeDropdown();
-      searchStore.isSearchEnabled = false;
-      showFilter = false;
-    }, 100);
-
-    clearTimeout(focusOutTimer);
+    searchStore.isSearchEnabled = false;
   };
 
   const onHistoryTermClick = async (searchTerm: string) => {
diff --git a/web/src/lib/stores/search.svelte.ts b/web/src/lib/stores/search.svelte.ts
index 816c5c56e1..7d012922ca 100644
--- a/web/src/lib/stores/search.svelte.ts
+++ b/web/src/lib/stores/search.svelte.ts
@@ -1,12 +1,10 @@
 class SearchStore {
   savedSearchTerms = $state<string[]>([]);
   isSearchEnabled = $state(false);
-  preventRaceConditionSearchBar = $state(false);
 
   clearCache() {
     this.savedSearchTerms = [];
     this.isSearchEnabled = false;
-    this.preventRaceConditionSearchBar = false;
   }
 }
 
diff --git a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
index dad0cbb290..c985104e3c 100644
--- a/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
+++ b/web/src/routes/(user)/search/[[photos=photos]]/[[assetId=id]]/+page.svelte
@@ -19,7 +19,6 @@
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { searchStore } from '$lib/stores/search.svelte';
   import { shortcut } from '$lib/actions/shortcut';
   import {
     type AlbumResponseDto,
@@ -88,10 +87,7 @@
       assetInteraction.selectedAssets = [];
       return;
     }
-    if (!searchStore.preventRaceConditionSearchBar) {
-      handlePromiseError(goto(previousRoute));
-    }
-    searchStore.preventRaceConditionSearchBar = false;
+    handlePromiseError(goto(previousRoute));
   };
 
   $effect(() => {