From bbaeb2ffc1a7f996429d3ab62652900e1f6c074c Mon Sep 17 00:00:00 2001
From: mnsrulz <manishrawat4u@gmail.com>
Date: Wed, 8 Mar 2023 23:16:15 +0000
Subject: [PATCH] fix search input value loss during server side

---
 src/view/plugin/search/search.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/view/plugin/search/search.tsx b/src/view/plugin/search/search.tsx
index 89593af2..89aaccbf 100644
--- a/src/view/plugin/search/search.tsx
+++ b/src/view/plugin/search/search.tsx
@@ -32,6 +32,8 @@ export function Search() {
   const { dispatch } = useStore();
   const state = useSelector((state) => state.search);
 
+  const [searchInput, setSearchInput] = useState(props.keyword || '');
+
   useEffect(() => {
     if (!processor) return;
 
@@ -72,6 +74,13 @@ export function Search() {
     return () => config.pipeline.unregister(processor);
   }, [config, processor]);
 
+  const handleSearchInput = (event: JSX.TargetedEvent<HTMLInputElement>) => {
+    if (event.target instanceof HTMLInputElement) {
+      setSearchInput(event.target.value);
+      debouncedOnInput(event);
+    }
+  }
+
   const debouncedOnInput = useCallback(
     debounce(
       (event: JSX.TargetedEvent<HTMLInputElement>) => {
@@ -92,9 +101,9 @@ export function Search() {
         type="search"
         placeholder={_('search.placeholder')}
         aria-label={_('search.placeholder')}
-        onInput={debouncedOnInput}
+        onInput={handleSearchInput}
         className={classJoin(className('input'), className('search', 'input'))}
-        value={state?.keyword || ''}
+        value={searchInput || ''}
       />
     </div>
   );