From 48fdad0519d3afd1f3a067f5b95e585b9a98e694 Mon Sep 17 00:00:00 2001
From: Eric Doughty-Papassideris <edoughtypapassideris@linagora.com>
Date: Thu, 7 Mar 2024 17:32:34 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Frontend=20create=20directory=20?=
 =?UTF-8?q?modal=20focuses=20text=20box=20and=20accepts=20enter=20key?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../drive/modals/create/create-folder.tsx     | 46 +++++++++++++------
 1 file changed, 32 insertions(+), 14 deletions(-)

diff --git a/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-folder.tsx b/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-folder.tsx
index 0fd14bd2..d55f9093 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/modals/create/create-folder.tsx
+++ b/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>