diff --git a/client/src/hooks/useMembersStep.ts b/client/src/hooks/useMembersStep.ts index 9cd68f2a4..2f1039c4a 100644 --- a/client/src/hooks/useMembersStep.ts +++ b/client/src/hooks/useMembersStep.ts @@ -1,4 +1,4 @@ -import {useEffect, useState} from 'react'; +import {RefObject, useEffect, useRef, useState} from 'react'; import {useNavigate} from 'react-router-dom'; import {BillInfo} from '@pages/AddBillFunnel/AddBillFunnel'; @@ -22,6 +22,7 @@ interface Props { const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) => { const [errorMessage, setErrorMessage] = useState(''); const [nameInput, setNameInput] = useState(''); + const inputRef = useRef(null); const {postMembersAsync, isPending: isPendingPostMembers} = useRequestPostMembers(); @@ -59,15 +60,16 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) }; const handleNameInputEnter = (event: React.KeyboardEvent) => { - if (event.nativeEvent.isComposing) { - return; - } if (event.key === 'Enter' && canAddMembers) { event.preventDefault(); if (!billInfo.members.map(({name}) => name).includes(nameInput)) { setBillInfoMemberWithId(nameInput); } setNameInput(''); + if (inputRef.current) { + inputRef.current.blur(); + setTimeout(() => inputRef.current?.focus(), 0); + } } }; @@ -102,6 +104,10 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) } }, [isSuccessPostBill]); + useEffect(() => { + console.log(nameInput); + }, [nameInput]); + const handlePrevStep = () => { setStep('title'); }; @@ -109,6 +115,7 @@ const useMembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) return { errorMessage, nameInput, + inputRef, handleNameInputChange, handleNameInputEnter, isPendingPostBill, diff --git a/client/src/pages/AddBillFunnel/steps/MembersStep.tsx b/client/src/pages/AddBillFunnel/steps/MembersStep.tsx index 5d78083a9..fe4052d8e 100644 --- a/client/src/pages/AddBillFunnel/steps/MembersStep.tsx +++ b/client/src/pages/AddBillFunnel/steps/MembersStep.tsx @@ -22,6 +22,7 @@ const MembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) => const { errorMessage, nameInput, + inputRef, handleNameInputChange, handleNameInputEnter, isPendingPostBill, @@ -46,6 +47,7 @@ const MembersStep = ({billInfo, setBillInfo, currentMembers, setStep}: Props) =>