🚸 Frontend create directory modal focuses text box and accepts enter key

tdrive/frontend/src/app/views/client/body/drive/modals/create/create-folder.tsx

@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useRecoilState } from 'recoil';
-import { CreateModalAtom } from '.';
+import { CreateModalAtom, CreateModalAtomType } from '.';
 import { Button } from '@atoms/button/button';
 import { Input } from '@atoms/input/input-text';
 import { Info } from '@atoms/text';
@@ -12,26 +12,44 @@ export const CreateFolder = () => {
   const [loading, _] = useState<boolean>(false);
   const [state, setState] = useRecoilState(CreateModalAtom);
   const { create } = useDriveActions();
+  const inputRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      const firstInput = inputRef.current && inputRef.current.querySelector("input") as HTMLInputElement;
+      if (firstInput)
+        firstInput.focus();
+    }, 100);
+  }, []);
+
+  const createFolderHandler = async () => {
+    await create({ name, parent_id: state.parent_id, is_directory: true }, {});
+    setState({ ...state, open: false });
+  }
 
   return (
     <>
       <Info>{ Languages.t('components.create_folder_modal.hint')}</Info>
-
-      <Input
-        disabled={loading}
-        placeholder={ Languages.t('components.create_folder_modal.placeholder')}
-        className="w-full mt-4"
-        onChange={(e: any) => setName(e.target.value)}
-      />
-
+      <div ref={inputRef}>
+        <Input
+          disabled={loading}
+          placeholder={ Languages.t('components.create_folder_modal.placeholder')}
+          className="w-full mt-4"
+          onKeyDown={(e: any) => {
+            if (e.keyCode === 13) {
+              e.preventDefault();
+              if (e.target.value)
+                createFolderHandler();
+            }
+          }}
+          onChange={(e: any) => setName(e.target.value)}
+        />
+      </div>
       <Button
         disabled={!name}
         loading={loading}
         className="mt-4 float-right"
-        onClick={async () => {
-          await create({ name, parent_id: state.parent_id, is_directory: true }, {});
-          setState({ ...state, open: false });
-        }}
+        onClick={createFolderHandler}
       >
         Create
       </Button>