From ae4a3d9954d892f51e27b10eecc2456e6d0d424b Mon Sep 17 00:00:00 2001
From: Corey Sotiropoulos <coco@solos.dev>
Date: Thu, 23 May 2024 22:50:18 -0400
Subject: [PATCH] Hide URL input field when loss of focus

---
 client/src/components/Header/AddServer.tsx | 50 ++++++++++++++--------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/client/src/components/Header/AddServer.tsx b/client/src/components/Header/AddServer.tsx
index c179977..b4f2b53 100644
--- a/client/src/components/Header/AddServer.tsx
+++ b/client/src/components/Header/AddServer.tsx
@@ -59,32 +59,41 @@ export default function AddServer({ servers, setServers }: AddServerProps) {
     setShowAddServer((prev) => !prev);
   };
 
-  const handleSubmit = async (event: React.KeyboardEvent<HTMLFormElement>) => {
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     if (inputRef.current) {
       const inputText = inputRef.current.value;
       setIsLoading(true);
-      const response = await postData(inputText);
-      if (response.success) {
-        showAlert({
-          message: response.message,
-          severity: 'success',
-        });
-        if (response.data && typeof response.data === 'object') {
-          navigate(`/server/${encodeURIComponent(response.data.url)}`);
-          setServers([response.data, ...servers]);
-        }
-        if (inputRef.current) {
-          inputRef.current.value = '';
+      try {
+        const response = await postData(inputText);
+        if (response.success) {
+          showAlert({
+            message: response.message,
+            severity: 'success',
+          });
+          if (response.data && typeof response.data === 'object') {
+            navigate(`/server/${encodeURIComponent(response.data.url)}`);
+            setServers([response.data, ...servers]);
+          }
           toggleShowAddServer();
+          inputRef.current.value = '';
+        } else {
+          showAlert({
+            message: response.message || 'Failed to send data to backend.',
+            severity: 'error',
+          });
+          setTimeout(() => {
+            inputRef.current?.focus();
+          }, 0);
         }
-      } else {
+      } catch (error) {
         showAlert({
-          message: response.message || 'Failed to send data to backend.',
+          message: 'An error occurred during submission.',
           severity: 'error',
         });
+      } finally {
+        setIsLoading(false);
       }
-      setIsLoading(false);
     }
   };
 
@@ -93,7 +102,7 @@ export default function AddServer({ servers, setServers }: AddServerProps) {
       case 'Escape': {
         if (inputRef.current) {
           if (inputRef.current.value === '') {
-            toggleShowAddServer();
+            inputRef.current.blur();
           } else {
             inputRef.current.value = '';
           }
@@ -104,6 +113,12 @@ export default function AddServer({ servers, setServers }: AddServerProps) {
     }
   };
 
+  const handleBlur = () => {
+    if (!isLoading && inputRef.current && inputRef.current.value === '') {
+      toggleShowAddServer();
+    }
+  };
+
   return (
     <>
       <Box ref={containerRef} className="overflow-hidden pl-4">
@@ -123,6 +138,7 @@ export default function AddServer({ servers, setServers }: AddServerProps) {
                   'aria-label': 'add-server',
                 }}
                 onKeyUp={handleKeyUp}
+                onBlur={handleBlur}
                 disabled={isLoading}
                 endAdornment={
                   isLoading && (