mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
♻️ enhan: auto focus input email
:%s
This commit is contained in:
parent
48ab2f2242
commit
1383d66832
@ -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<Ref, Props>(({
|
||||
name,
|
||||
placeholder,
|
||||
type,
|
||||
@ -32,9 +35,15 @@ const InputFiledInForm = ({
|
||||
isShowIconSuccess,
|
||||
error,
|
||||
onEnter,
|
||||
}: Props) => {
|
||||
}: Props, ref) => {
|
||||
const inputElementRef = useRef<HTMLInputElement>(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}
|
||||
/>
|
||||
|
||||
</div>
|
||||
{error && <div className={s.errorMessage}>{error}</div>}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
InputFiledInForm.displayName = 'InputFiledInForm'
|
||||
export default InputFiledInForm
|
||||
|
@ -83,6 +83,7 @@ const FormRegister = ({ onSwitch, isHide }: Props) => {
|
||||
<InputFiledInForm
|
||||
name="email"
|
||||
placeholder="Email Address"
|
||||
ref = {emailRef}
|
||||
error={
|
||||
touched.email && errors.email
|
||||
? errors.email.toString()
|
||||
|
Loading…
x
Reference in New Issue
Block a user