From 9f7bf36786017aa916af74202636434fc2eca166 Mon Sep 17 00:00:00 2001
From: Alex <alex.tran1502@gmail.com>
Date: Wed, 19 Jul 2023 11:03:23 -0500
Subject: [PATCH] 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
---
 .../components/photos-page/asset-grid.svelte  | 24 ++++++++++++++++---
 .../search-bar/search-bar.svelte              | 16 ++++++++++---
 web/src/lib/stores/search.store.ts            |  2 ++
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/components/photos-page/asset-grid.svelte b/web/src/lib/components/photos-page/asset-grid.svelte
index cdb11db8e6..2cb9e86023 100644
--- a/web/src/lib/components/photos-page/asset-grid.svelte
+++ b/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;
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 10251d7276..f5c4be56a1 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
@@ -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:focusout={() => (showBigSearchBar = false)}
+  on:focusin={onFocusIn}
+  on:focusout={onFocusOut}
 >
   <label>
     <div class="absolute inset-y-0 left-0 flex items-center pl-6">
diff --git a/web/src/lib/stores/search.store.ts b/web/src/lib/stores/search.store.ts
index dbcfb921a9..e885433954 100644
--- a/web/src/lib/stores/search.store.ts
+++ b/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);