fix(web): cannot use semicolon on the search bar in asset grid page (#3334)

* fix(web): cannot use semicolon on the search bar

* fix(web): cannot use semicolon on the search bar

* remove console log

* fix: disable hotkey when search is enable

* format

* fix event listener removal

web/src/lib/components/photos-page/asset-grid.svelte

@@ -29,6 +29,7 @@
   import { AppRoute } from '$lib/constants';
   import { goto } from '$app/navigation';
   import { browser } from '$app/environment';
+  import { isSearchEnabled } from '$lib/stores/search.store';
 
   export let user: UserResponseDto | undefined = undefined;
   export let isAlbumSelectionMode = false;
@@ -74,12 +75,22 @@
   });
 
   onDestroy(() => {
-    if (browser) document.removeEventListener('keydown', handleKeyboardPress);
+    if (browser) {
+      document.removeEventListener('keydown', onKeyboardPress);
+    }
+
     assetStore.setInitialState(0, 0, { totalCount: 0, buckets: [] }, undefined);
   });
 
   const handleKeyboardPress = (event: KeyboardEvent) => {
-    if (event.key === '/') event.preventDefault();
+    if ($isSearchEnabled) {
+      return;
+    }
+
+    if (event.key === '/') {
+      event.preventDefault();
+    }
+
     if (!$isViewingAssetStoreState) {
       switch (event.key) {
         case '/':
@@ -147,13 +158,20 @@
   let shiftKeyIsDown = false;
 
   const onKeyDown = (e: KeyboardEvent) => {
+    if ($isSearchEnabled) {
+      return;
+    }
+
     if (e.shiftKey && e.key !== '/') {
       e.preventDefault();
       shiftKeyIsDown = true;
     }
   };
-
   const onKeyUp = (e: KeyboardEvent) => {
+    if ($isSearchEnabled) {
+      return;
+    }
+
     if (e.shiftKey && e.key !== '/') {
       e.preventDefault();
       shiftKeyIsDown = false;

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 { savedSearchTerms } from '$lib/stores/search.store';
+  import { isSearchEnabled, savedSearchTerms } from '$lib/stores/search.store';
   import { fly } from 'svelte/transition';
   export let value = '';
   export let grayTheme: boolean;
@@ -43,6 +43,16 @@
   const clearSearchTerm = () => {
     $savedSearchTerms = [];
   };
+
+  const onFocusIn = () => {
+    showBigSearchBar = true;
+    $isSearchEnabled = true;
+  };
+
+  const onFocusOut = () => {
+    showBigSearchBar = false;
+    $isSearchEnabled = false;
+  };
 </script>
 
 <form
@@ -52,8 +62,8 @@
   action={AppRoute.SEARCH}
   on:reset={() => (value = '')}
   on:submit|preventDefault={() => onSearch(true)}
-  on:focusin={() => (showBigSearchBar = true)}
+  on:focusin={onFocusIn}
-  on:focusout={() => (showBigSearchBar = false)}
+  on:focusout={onFocusOut}
 >
   <label>
     <div class="absolute inset-y-0 left-0 flex items-center pl-6">

web/src/lib/stores/search.store.ts

@@ -1,3 +1,5 @@
 import { persisted } from 'svelte-local-storage-store';
+import { writable } from 'svelte/store';
 
 export const savedSearchTerms = persisted<string[]>('search-terms', [], {});
+export const isSearchEnabled = writable<boolean>(false);