diff --git a/components/parts/LabeledInput.tsx b/components/parts/LabeledInput.tsx index 859125d..f0a8b33 100644 --- a/components/parts/LabeledInput.tsx +++ b/components/parts/LabeledInput.tsx @@ -9,6 +9,7 @@ type Props = { placeholder: string value: string onChange: (e: React.ChangeEvent) => void + onKeyDown?: (e: React.KeyboardEvent) => void } const LabeledInput = ({ @@ -17,7 +18,8 @@ const LabeledInput = ({ label, placeholder, value, - onChange + onChange, + onKeyDown }: Props) => { const commonProps = useMemo( () => ({ @@ -37,9 +39,10 @@ const LabeledInput = ({ } }, value, - onChange + onChange, + onKeyDown }), - [value, onChange, placeholder] + [value, onChange, placeholder, onKeyDown] ) return ( diff --git a/components/templates/ConnectPage/FolderListModal.tsx b/components/templates/ConnectPage/FolderListModal.tsx index b9301f9..14d3ea0 100644 --- a/components/templates/ConnectPage/FolderListModal.tsx +++ b/components/templates/ConnectPage/FolderListModal.tsx @@ -6,6 +6,7 @@ import { memo, useCallback, useEffect, + useMemo, useState } from "react" import ModalDefault from "../../parts/ModalDefault" @@ -79,6 +80,20 @@ const FolderListModal = ({ [setFolderPaths, folderPaths] ) + const isAddButtonDisabled = useMemo( + () => !inputFolderPath || !inputFolderPath.startsWith("/"), + [inputFolderPath] + ) + + const handlePathInputKeyDown = useCallback( + (e: React.KeyboardEvent) => { + if (e.nativeEvent.isComposing || e.key !== "Enter" || isAddButtonDisabled) + return + handleAddFolderPathButtonClick() + }, + [handleAddFolderPathButtonClick, isAddButtonDisabled] + ) + return ( setInputFolderPath(e.target.value)} + onKeyDown={handlePathInputKeyDown} />