From 7681722e5afdc2df0c9eed201b05add3beda92a7 Mon Sep 17 00:00:00 2001
From: Sabir Hassan <sabirbk06@gmail.com>
Date: Thu, 28 Jul 2022 23:55:59 +0500
Subject: [PATCH] fix: autofocus input field and submit on enter

---
 web/src/components/filePathInputModal.tsx | 31 ++++++++++-------
 web/src/components/nameInputModal.tsx     | 41 ++++++++++++++++-------
 web/src/components/tree.tsx               |  6 +++-
 3 files changed, 53 insertions(+), 25 deletions(-)

diff --git a/web/src/components/filePathInputModal.tsx b/web/src/components/filePathInputModal.tsx
index d1eeaa5..f5bcca6 100644
--- a/web/src/components/filePathInputModal.tsx
+++ b/web/src/components/filePathInputModal.tsx
@@ -39,21 +39,30 @@ const FilePathInputModal = ({
     setFilePath(value)
   }
 
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (hasError || !filePath) return
+    saveFile(filePath)
+  }
+
   return (
     <BootstrapDialog fullWidth onClose={() => setOpen(false)} open={open}>
       <BootstrapDialogTitle id="abort-modal" handleOpen={setOpen}>
         Save File
       </BootstrapDialogTitle>
       <DialogContent dividers>
-        <TextField
-          fullWidth
-          variant="outlined"
-          label="File Path"
-          value={filePath}
-          onChange={handleChange}
-          error={hasError}
-          helperText={errorText}
-        />
+        <form onSubmit={handleSubmit}>
+          <TextField
+            fullWidth
+            autoFocus
+            variant="outlined"
+            label="File Path"
+            value={filePath}
+            onChange={handleChange}
+            error={hasError}
+            helperText={errorText}
+          />
+        </form>
       </DialogContent>
       <DialogActions>
         <Button variant="contained" onClick={() => setOpen(false)}>
@@ -61,9 +70,7 @@ const FilePathInputModal = ({
         </Button>
         <Button
           variant="contained"
-          onClick={() => {
-            saveFile(filePath)
-          }}
+          onClick={() => saveFile(filePath)}
           disabled={hasError || !filePath}
         >
           Save
diff --git a/web/src/components/nameInputModal.tsx b/web/src/components/nameInputModal.tsx
index ff652bd..3ae8364 100644
--- a/web/src/components/nameInputModal.tsx
+++ b/web/src/components/nameInputModal.tsx
@@ -32,6 +32,14 @@ const NameInputModal = ({
     if (defaultName) setName(defaultName)
   }, [defaultName])
 
+  const handleFocus = (
+    event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement, Element>
+  ) => {
+    if (defaultName) {
+      event.target.select()
+    }
+  }
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value
 
@@ -55,21 +63,32 @@ const NameInputModal = ({
     setName(value)
   }
 
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (hasError || !name) return
+    action(name)
+  }
+
   return (
     <BootstrapDialog fullWidth onClose={() => setOpen(false)} open={open}>
       <BootstrapDialogTitle id="abort-modal" handleOpen={setOpen}>
         {title}
       </BootstrapDialogTitle>
       <DialogContent dividers>
-        <TextField
-          fullWidth
-          variant="outlined"
-          label={isFolder ? 'Folder Name' : 'File Name'}
-          value={name}
-          onChange={handleChange}
-          error={hasError}
-          helperText={errorText}
-        />
+        <form onSubmit={handleSubmit}>
+          <TextField
+            id="input-box"
+            fullWidth
+            autoFocus
+            onFocus={handleFocus}
+            variant="outlined"
+            label={isFolder ? 'Folder Name' : 'File Name'}
+            value={name}
+            onChange={handleChange}
+            error={hasError}
+            helperText={errorText}
+          />
+        </form>
       </DialogContent>
       <DialogActions>
         <Button variant="contained" onClick={() => setOpen(false)}>
@@ -77,9 +96,7 @@ const NameInputModal = ({
         </Button>
         <Button
           variant="contained"
-          onClick={() => {
-            action(name)
-          }}
+          onClick={() => action(name)}
           disabled={hasError || !name}
         >
           {actionLabel}
diff --git a/web/src/components/tree.tsx b/web/src/components/tree.tsx
index df4af5b..a76b4ae 100644
--- a/web/src/components/tree.tsx
+++ b/web/src/components/tree.tsx
@@ -67,6 +67,7 @@ const TreeViewNode = ({
     useState(false)
   const [deleteConfirmationModalMessage, setDeleteConfirmationModalMessage] =
     useState('')
+  const [defaultInputModalName, setDefaultInputModalName] = useState('')
   const [nameInputModalOpen, setNameInputModalOpen] = useState(false)
   const [nameInputModalTitle, setNameInputModalTitle] = useState('')
   const [nameInputModalActionLabel, setNameInputModalActionLabel] = useState('')
@@ -129,6 +130,7 @@ const TreeViewNode = ({
     setNameInputModalTitle('Add Folder')
     setNameInputModalActionLabel('Add')
     setNameInputModalForFolder(true)
+    setDefaultInputModalName('')
   }
 
   const handleNewFileItemClick = () => {
@@ -137,6 +139,7 @@ const TreeViewNode = ({
     setNameInputModalTitle('Add File')
     setNameInputModalActionLabel('Add')
     setNameInputModalForFolder(false)
+    setDefaultInputModalName('')
   }
 
   const addFileFolder = (name: string) => {
@@ -152,6 +155,7 @@ const TreeViewNode = ({
     setNameInputModalTitle('Rename')
     setNameInputModalActionLabel('Rename')
     setNameInputModalForFolder(node.isFolder)
+    setDefaultInputModalName(node.relativePath.split('/').pop() ?? '')
   }
 
   const renameFileFolder = (name: string) => {
@@ -208,7 +212,7 @@ const TreeViewNode = ({
         action={
           nameInputModalActionLabel === 'Add' ? addFileFolder : renameFileFolder
         }
-        defaultName={node.relativePath.split('/').pop()}
+        defaultName={defaultInputModalName}
       />
       <Menu
         open={contextMenu !== null}