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

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

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

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

}

Answer 2

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 3

在React文档中有一个很好的例子： https ： //facebook.github.io/react/docs/refs-and-the-dom.html

Answer 4

If you want to use stateless functional components refs will do you no good. My solution is to pass a first={true} prop to Field and check for it inside the component. It it exists then set autoFocus on the input field.