[Update] ログイン画面とWebDAVのフォルダー追加画面で入力中にEnterを押下するとSubmitされるように

components/parts/LabeledInput.tsx

@@ -9,6 +9,7 @@ type Props = {
   placeholder: string
   value: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => 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 (

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<HTMLInputElement>) => {
+      if (e.nativeEvent.isComposing || e.key !== "Enter" || isAddButtonDisabled)
+        return
+      handleAddFolderPathButtonClick()
+    },
+    [handleAddFolderPathButtonClick, isAddButtonDisabled]
+  )
+
   return (
     <ModalDefault
       title="MixJuiceで使用するフォルダーを追加"
@@ -96,13 +111,14 @@ const FolderListModal = ({
             placeholder="例: /home/user/music"
             value={inputFolderPath}
             onChange={e => setInputFolderPath(e.target.value)}
+            onKeyDown={handlePathInputKeyDown}
           />
         </Input.Wrapper>
 
         <Button
           color="webdav"
           loading={isCheckingFolderExists}
-          disabled={!inputFolderPath || !inputFolderPath.startsWith("/")}
+          disabled={isAddButtonDisabled}
           onClick={handleAddFolderPathButtonClick}
         >
           追加

components/templates/SigninPage/Signin.tsx

@@ -1,5 +1,5 @@
 import { Stack, Group, Button } from "@mantine/core"
-import { memo, useCallback, useMemo, useState } from "react"
+import { memo, useCallback, useMemo, useState, KeyboardEvent } from "react"
 import { HiOutlineMail } from "react-icons/hi"
 import { PiPasswordBold } from "react-icons/pi"
 import GradientButton from "@/components/parts/GradientButton"
@@ -95,6 +95,23 @@ const Signin = ({ className, isDisplay, slideTo }: Props) => {
     () => passwordInput.length >= 6, // 6文字以上なのはFirebaseの仕様
     [passwordInput]
   )
+  const isSigninButtonDisabled = useMemo(
+    () => !isValidEmail || !hasValidPassword,
+    [isValidEmail, hasValidPassword]
+  )
+
+  const handlePasswordKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLInputElement>) => {
+      if (
+        e.nativeEvent.isComposing ||
+        e.key !== "Enter" ||
+        isSigninButtonDisabled
+      )
+        return
+      handleSinginButtonClick()
+    },
+    [handleSinginButtonClick, isSigninButtonDisabled]
+  )
 
   return (
     <Stack
@@ -122,6 +139,7 @@ const Signin = ({ className, isDisplay, slideTo }: Props) => {
           placeholder="パスワード"
           value={passwordInput}
           onChange={e => setPasswordInput(e.currentTarget.value)}
+          onKeyDown={handlePasswordKeyDown}
         />
       </Stack>
 
@@ -130,7 +148,7 @@ const Signin = ({ className, isDisplay, slideTo }: Props) => {
         ff="notoSansJP"
         fz="0.9rem"
         fw={600}
-        disabled={!isValidEmail || !hasValidPassword}
+        disabled={isSigninButtonDisabled}
         loading={isProcessing}
         onClick={handleSinginButtonClick}
       >