Fix edit search query issue (#454)

* Fix edit search query issue

* Update useEffect to avoid missing dep warning

---------

Co-authored-by: Cole Bemis <colebemis@github.com>

src/components/search-input.tsx

@@ -1,4 +1,5 @@
 import React from "react"
+import { useGetter } from "../hooks/getter"
 import { cx } from "../utils/cx"
 import { IconButton } from "./icon-button"
 import { ClearIcon16, SearchIcon16 } from "./icons"
@@ -12,10 +13,32 @@ type SearchInputProps = Omit<React.ComponentPropsWithoutRef<"input">, "onChange"
 export function SearchInput({
   shortcut,
   placeholder = "Search…",
+  value,
   onChange,
   ...props
 }: SearchInputProps) {
   const ref = React.useRef<HTMLInputElement>(null)
+  const [inputValue, setInputValue] = React.useState(value || "")
+  const getInputValue = useGetter(inputValue)
+
+  React.useEffect(() => {
+    if (value !== getInputValue()) {
+      setInputValue(value || "")
+    }
+  }, [value, getInputValue])
+
+  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    const newValue = event.target.value
+    setInputValue(newValue)
+    onChange?.(newValue)
+  }
+
+  function clearInput() {
+    setInputValue("")
+    onChange?.("")
+    ref.current?.focus()
+  }
+
   return (
     <div className="relative">
       <div className="absolute inset-y-0 left-0 grid aspect-square place-items-center text-text-secondary">
@@ -25,34 +48,28 @@ export function SearchInput({
         ref={ref}
         className={cx(
           "focus-ring h-10 w-full rounded-lg bg-bg-secondary pl-10 [-webkit-appearance:none] [font-variant-numeric:inherit] placeholder:text-text-secondary coarse:h-12 coarse:pl-12 [&:not(:focus-visible)]:hover:ring-1 [&:not(:focus-visible)]:hover:ring-inset [&:not(:focus-visible)]:hover:ring-border-secondary",
-          props.value ? "pr-10 coarse:pr-12" : "pr-3 coarse:pr-4",
+          value ? "pr-10 coarse:pr-12" : "pr-3 coarse:pr-4",
         )}
         type="search"
+        value={inputValue}
         placeholder={placeholder}
-        onChange={(e) => onChange?.(e.target.value)}
+        onChange={handleChange}
         {...props}
       />
-      {shortcut && !props.value ? (
+      {shortcut && !inputValue ? (
         <div
           aria-hidden
           className="absolute inset-y-0 right-0 flex items-center pr-3 coarse:hidden"
         >
           <Keys keys={shortcut} />
         </div>
       ) : null}
-      {props.value ? (
+      {inputValue ? (
         <div
           aria-hidden
           className="absolute inset-y-0 right-0 grid aspect-square place-items-center"
         >
-          <IconButton
-            aria-label="Clear"
-            tabIndex={-1}
-            onClick={() => {
-              onChange?.("")
-              ref.current?.focus()
-            }}
-          >
+          <IconButton aria-label="Clear" tabIndex={-1} onClick={clearInput}>
             <ClearIcon16 />
           </IconButton>
         </div>

src/hooks/getter.ts

@@ -0,0 +1,9 @@
+import { useCallback, useRef, useEffect } from "react"
+
+export function useGetter<T>(value: T) {
+  const valueRef = useRef(value)
+  useEffect(() => {
+    valueRef.current = value
+  }, [value])
+  return useCallback(() => valueRef.current, [])
+}

src/routes/notes_.$.tsx

@@ -48,6 +48,7 @@ import {
   widthAtom,
 } from "../global-state"
 import { useEditorSettings } from "../hooks/editor-settings"
+import { useGetter } from "../hooks/getter"
 import { useIsScrolled } from "../hooks/is-scrolled"
 import { useDeleteNote, useNoteById, useSaveNote } from "../hooks/note"
 import { useSearchNotes } from "../hooks/search"
@@ -119,14 +120,6 @@ function RouteComponent() {
 
 const toggleModeShortcut = ["⌥", "⇥"]
 
-function useGetter<T>(value: T) {
-  const valueRef = useRef(value)
-  useEffect(() => {
-    valueRef.current = value
-  }, [value])
-  return useCallback(() => valueRef.current, [])
-}
-
 function renderTemplate(template: Template, args: Record<string, unknown> = {}) {
   let text = ejs.render(template.body, args)
   text = removeFrontmatterComments(text)