From 0e3266c3ba1153d883423f84f10c63420475af75 Mon Sep 17 00:00:00 2001
From: Juan Di Toro <ditorojuanf@gmail.com>
Date: Fri, 20 Oct 2023 10:48:22 +0200
Subject: [PATCH] fix: input element

---
 src/components/App.tsx     |  2 --
 src/components/Browser.tsx | 34 ++++++++++++++++++++++------------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index dfa4396..aac363a 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -17,9 +17,7 @@ const App: React.FC = () => {
         <LumeStatusProvider>
           <AuthProvider>
             <header className="relative h-14 px-2 pl-2 py-2 w-full bg-neutral-900 flex">
-              <div className="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center [>input:focus]:ring-2 [>input:focus]:ring-white">
                 <Navigator />
-              </div>
               <div className="w-32 flex justify-end">
                 <NetworksProvider>
                   <Lume />
diff --git a/src/components/Browser.tsx b/src/components/Browser.tsx
index b6d19d9..acc5e94 100644
--- a/src/components/Browser.tsx
+++ b/src/components/Browser.tsx
@@ -135,12 +135,16 @@ async function bootup() {
   }
 }
 
+const NavInput = forwardRef<HTMLInputElement>((props: React.HTMLProps<HTMLInputElement>, ref) => {
+  return <Input ref={ref} {...props}></Input>;
+});
+
 export function Navigator() {
   const { url: contextUrl, setUrl } = useBrowserState();
-  const [inputValue, setInputValue] = useState(contextUrl); // Local state for the input value
   const { ready } = useLumeStatus();
+  const inputEl = useRef<HTMLInputElement>();
 
-  const browse = () => {
+  const browse = (inputValue: string) => {
     let input = inputValue.trim();
 
     // If the input doesn't contain a protocol, assume it's http
@@ -160,27 +164,33 @@ export function Navigator() {
   };
 
   useEffect(() => {
-    setInputValue(contextUrl); // Update local state when context's url changes
+    if(inputEl.current) {
+      inputEl.current.value = contextUrl;
+    }
   }, [contextUrl]);
 
-  const NavInput = forwardRef((props: any, ref) => {
-    return <Input ref={ref} {...props}></Input>;
-  });
-
   console.log("Navigator mounted");
 
   return (
-    <>
+    <form onSubmit={(e) => {
+      e.preventDefault();
+      const inputElement = e.target as HTMLFormElement;
+      const inputValue = inputElement?.elements.namedItem('url')?.value;
+      if (inputValue) {
+        browse(inputValue)
+      }
+    }} className="relative h-full w-full rounded-full bg-neutral-800 border border-neutral-700 flex items-center [>input:focus]:ring-2 [>input:focus]:ring-white">
       <NavInput
-        value={inputValue}
-        onChange={(e: any) => setInputValue(e.target.value)}
+        ref={inputEl}
         disabled={!ready}
+        className="rounded-l-full border-none"
+        name="url"
       />
-      <Button onClick={browse} disabled={!ready}>
+      <Button disabled={!ready} className="rounded-r-full">
         Navigate
         <Arrow />
       </Button>
-    </>
+    </form>
   );
 }