From 29e95dba6dd86bcc5d29d0e030bf8c932bdce102 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Mon, 16 Oct 2023 18:06:47 -0400
Subject: [PATCH] fix: use a local state var for the input

---
 src/components/Browser.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Browser.tsx b/src/components/Browser.tsx
index 637ef60..a7370ef 100644
--- a/src/components/Browser.tsx
+++ b/src/components/Browser.tsx
@@ -130,11 +130,12 @@ async function bootup() {
 }
 
 export function Navigator() {
-  const { url, setUrl } = useBrowserState();
+  const { url: contextUrl, setUrl } = useBrowserState();
   const { isLoggedIn } = useAuth();
+  const [inputValue, setInputValue] = useState(contextUrl); // Local state for the input value
 
   const browse = useCallback(() => {
-    let input = url.trim();
+    let input = contextUrl.trim();
 
     // If the input doesn't contain a protocol, assume it's http
     if (!input?.match(/^https?:\/\//)) {
@@ -153,7 +154,7 @@ export function Navigator() {
       // Handle invalid URLs here, if needed
       console.error("Invalid URL:", e);
     }
-  }, [url, setUrl]);
+  }, [contextUrl, setUrl]);
 
   const NavInput = forwardRef((props: any, ref) => (
     <Input ref={ref} {...props}></Input>
@@ -163,7 +164,11 @@ export function Navigator() {
 
   return (
     <>
-      <NavInput value={url} disabled={!isLoggedIn} />
+      <NavInput
+        value={inputValue}
+        onChange={(e: any) => setInputValue(e.target.value)}
+        disabled={!isLoggedIn}
+      />
       <Button onClick={browse} disabled={!isLoggedIn}>
         Navigate
         <Arrow />