How to set focus on a TextField\input using a Formik form when initialValues are passed through\bound to props.object?

Question

I have Formik form with this TextField from @material-ui/core:

<TextField
    autoFocus
    fullWidth
    name='name'
    label='Name'
    variant="outlined"
    onChange={handleChange("name")}
    helperText={errors.name ? errors.name : "What's your name?"
    error={errors.name}
    touched={touched.name}
    value={values.name}
/>

This works great when the form loads for the 1st time with initialValues set to an empty user object. The Name input will be focused.

However when loading the form with an existing user object (during Edit operation) it loads all the fields correctly but there's no focus anymore.

This form is inside a stateless functional component and props.user comes from a parent component.

Any ideas on how to set focus in this case? Is there any place where I can hook up to call focus?

####### Edit 1 #######

I tried using useEffect but it is fired before the input field is actually updated with the value...

useEffect(() =>
{
    debugger;

    textInput.focus(); // at this point the input field hasn't gotten the value yet.
})

My guess is that I need to hold a ref inside the parent component...

Leniel Maccaferri · Accepted Answer · 2020-02-01 22:28:38Z

3

Got it working after debugging for some time...

I used a snippet of code taken from Run side effect when a prop changes w/Hooks and added a debugger statement to be able to check the input element:

let input = null

useEffect(() =>
{
    console.log('rendered!')

    if (input)
    {      
        debugger;

        input.focus()
    }

}, [props.user])

Note the props.user passed as argument... this means that anytime props.user changes, the useEffect hook will fire.

When setting ref on <TextField>:

ref={(i) => { input = i }}

as shown in many places when dealing with React JS focus, it was trying to focus on the TextField's <div> parent element from Material-UI. The real input is inside this <div>.

So the correct prop to set in TextField is inputRef:

inputRef={(i) => { input = i }}

This related answer led me in the right direction.

edited Feb 1, 2020 at 22:28

answered Feb 1, 2020 at 22:18

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Ali Over a year ago

Isn't your props.user going to run useEffect whenever it's going to change? I don't think you want to do that after every onChange. Try to add formikProps.initialValues.user as a dependency, it'll run upon changing initialValues.

Leniel Maccaferri Over a year ago

Yep... after every change, that is, once props.user changes I want to focus on the Name <TextField>. By the way: InitialValues is already assigned props.user.

Collectives™ on Stack Overflow

How to set focus on a TextField\input using a Formik form when initialValues are passed through\bound to props.object?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related