How to focus on first input field - redux-form

Question

I'm trying to set the first input field in any form to be focused. So, what is the best practice to implement something like this? And how could I check the type of the field? is it text, number, checkbox or etc.?

Is it by listening to @redux-form actions, and then dispatch a focus action?

Can any one suggest a solution ?

Answer 1

I think that for redux-form (v6+) the current state of art is to provide autoFocus property for the <input /> which you would like to be auto focused.

Example:

<Field component={renderFirstInput} type="text" />

const renderFirstInput = field => {
  return ( <input {...field.input} autoFocus /> )

}

Here is the Github issue link

You may of course provide autoFocus prop as a field.input key.

Answer 2

Using this approach, you can configure your autoFocus every time.

<Field component={renderFirstInput} autoFocus={true/false} />

const renderFirstInput = ({ autoFocus }) => {
  return ( <input autoFocus={autoFocus} /> )

}