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(false); const [state, setState] = useRecoilState(CreateModalAtom); const { create } = useDriveActions(); + const inputRef = useRef(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 ( <> { Languages.t('components.create_folder_modal.hint')} - - setName(e.target.value)} - /> - +
+ { + if (e.keyCode === 13) { + e.preventDefault(); + if (e.target.value) + createFolderHandler(); + } + }} + onChange={(e: any) => setName(e.target.value)} + /> +