Formik: onFocus?

[andrewcroce]

How does one access the onFocus event of an input. Looks like there is no handler for this on the API.

[erickeno]

What did you intend to use onFocus for? if it's a custom handler I think you should be okay using it as you normally would.

[bibekg]

Providing onFocus to the props.field of render prop of <Field /> would help formik keep track of whether the field is currently active (i.e. the user is focused on it). An example use case of this would be hiding error messages while the field is active. This is available in redux-form and seems like it'd be pretty worthwhile to include here as well.

[bwoodlt]

+1 This is a much needed request.

[Laureian]

+1 I'm also waiting for that.

[kaifaust]

+1

[ls-chloe-schoreisz]

+1

[przbatte]

+1

[muhfs94]

+1

[johnrom]

onFocus extra prop should be passed from <Field onFocus={event => console.log(event)} /> to any of the normal inputs (number, select, etc).

In terms of TypeScript, however, the typings on field are not capable of inferring the type of onFocus, so it will come through as any, and you'll have to make the signature something like:

<Field onFocus={(event: React.FocusEvent<HTMLInputElement>)} />

Child render func does not receive extra props like onFocus, but a custom component will. So you should be able to do something like:

const MyFocusingField = props => {
    const [isFocused, setIsFocused] = React.useState(false);
    const handleFocus = React.useCallback(event => { 
        setIsFocused(true); 
        props.onFocus?(event); 
    }, [props.onFocus]);

    return <input onFocus={handleFocus} />
}

const MyForm = () => {
    const handleFocus = React.useCallback(() => console.log("FOCUSED"), []);
   <Formik>
       <Field onFocus={handleFocus} />
   </Formik>
};