diff --git a/src/components/common/InputFiledInForm/InputFiledInForm.tsx b/src/components/common/InputFiledInForm/InputFiledInForm.tsx index 4b848e244..807aea561 100644 --- a/src/components/common/InputFiledInForm/InputFiledInForm.tsx +++ b/src/components/common/InputFiledInForm/InputFiledInForm.tsx @@ -1,10 +1,13 @@ import classNames from 'classnames' import { Field } from 'formik' -import React, { useMemo, useRef } from 'react' +import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react' import { IconCheck, IconError } from 'src/components/icons' import { KEY } from 'src/utils/constanst.utils' import s from './InputFiledInForm.module.scss' +type Ref = { + focus: () => void +} | null interface Props { placeholder?: string type?: 'text' | 'number' | 'email' | 'password' @@ -21,7 +24,7 @@ interface Props { onEnter?: (value: string | number) => void } -const InputFiledInForm = ({ +const InputFiledInForm = forwardRef(({ name, placeholder, type, @@ -32,9 +35,15 @@ const InputFiledInForm = ({ isShowIconSuccess, error, onEnter, -}: Props) => { +}: Props, ref) => { const inputElementRef = useRef(null) + useImperativeHandle(ref, () => ({ + focus: () => { + inputElementRef.current?.focus() + }, + })) + const iconElement = useMemo(() => { if (error) { return ( @@ -83,12 +92,14 @@ const InputFiledInForm = ({ placeholder={placeholder} onKeyDown={handleKeyDown} type={type} + innerRef={inputElementRef} /> + {error &&
{error}
} ) -} +}) InputFiledInForm.displayName = 'InputFiledInForm' export default InputFiledInForm diff --git a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx index 1cccf6977..9dd1f01ff 100644 --- a/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx +++ b/src/components/common/ModalAuthenticate/components/FormRegister/FormRegister.tsx @@ -83,6 +83,7 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {