From 4bc255a6247462ca0982860465af7a6a16851a1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Sun, 27 Jul 2025 20:36:23 -0500
Subject: [PATCH] fix: clear filters no longer shows up after searching and
 clearing the search bar

---
 .../components/TankSearch/components/SearchBar.tsx | 14 ++------------
 .../website/src/components/TankSearch/index.tsx    |  2 +-
 packages/website/src/stores/tankFilters.ts         |  4 ++--
 3 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/packages/website/src/components/TankSearch/components/SearchBar.tsx b/packages/website/src/components/TankSearch/components/SearchBar.tsx
index cdf39eb1f..5d65bcbc9 100644
--- a/packages/website/src/components/TankSearch/components/SearchBar.tsx
+++ b/packages/website/src/components/TankSearch/components/SearchBar.tsx
@@ -21,27 +21,17 @@ export function SearchBar({ topResult, skeleton, onSelect }: SearchBarProps) {
   const input = useRef<HTMLInputElement>(null);
   const performSearch = useCallback(
     debounce(() => {
-      // tankFiltersStore.setState({ searching: false });
       $tankFilters.setKey('searching', false);
 
       if (!input.current) return;
 
       const sanitized = input.current.value.trim();
 
-      // tankFiltersStore.setState({
-      //   search: sanitized.length === 0 ? undefined : sanitized,
-      // });
-      $tankFilters.setKey(
-        'search',
-        sanitized.length === 0 ? undefined : sanitized,
-      );
+      $tankFilters.setKey('search', sanitized.length === 0 ? null : sanitized);
     }, 500),
     [],
   );
   const handleChange = useCallback(() => {
-    // if (!tankFiltersStore.getState().searching) {
-    //   tankFiltersStore.setState({ searching: true });
-    // }
     if (!tankFilters.searching) {
       $tankFilters.setKey('searching', true);
     }
@@ -69,7 +59,7 @@ export function SearchBar({ topResult, skeleton, onSelect }: SearchBarProps) {
         <TextField.Root
           variant="classic"
           disabled={skeleton}
-          defaultValue={tankFilters.search}
+          defaultValue={tankFilters.search ?? undefined}
           style={{ flex: 1 }}
           ref={input}
           placeholder={strings.website.common.tank_search.search_bar_hint}
diff --git a/packages/website/src/components/TankSearch/index.tsx b/packages/website/src/components/TankSearch/index.tsx
index 1c8245725..58559fe76 100644
--- a/packages/website/src/components/TankSearch/index.tsx
+++ b/packages/website/src/components/TankSearch/index.tsx
@@ -60,7 +60,7 @@ export const TankSearch = memo<TankSearchProps>(
     const tankFilters = useStore($tankFilters);
     const tankopediaSort = useStore($tankopediaSort);
     const tanksFiltered = useMemo(() => {
-      if (tankFilters.search === undefined) {
+      if (tankFilters.search === null) {
         const filtered = awaitedTanksDefinitionsArray.filter((tank) =>
           filterTank(tankFilters, tank),
         );
diff --git a/packages/website/src/stores/tankFilters.ts b/packages/website/src/stores/tankFilters.ts
index a2ba14df9..14eaac227 100644
--- a/packages/website/src/stores/tankFilters.ts
+++ b/packages/website/src/stores/tankFilters.ts
@@ -18,7 +18,7 @@ export interface TankFilters {
   classes: TankClass[];
   types: TankType[];
   testing: 'include' | 'exclude' | 'only';
-  search?: string;
+  search: string | null;
   searching: boolean;
   gunType: CaseType<GunDefinition>[];
   shells: [ShellType | null, ShellType | null, ShellType | null];
@@ -30,7 +30,7 @@ export const initialTankFilters: TankFilters = {
   classes: [],
   types: [],
   testing: 'include',
-  search: undefined,
+  search: null,
   searching: false,
   gunType: [],
   shells: [null, null, null],