How do I go from one field to the next (without using TAB) in Redux-form 6?

Question

I've got a form with three fields that make up a phone number input. It looks something like this:

<form>
     <Field id="areaCode" name="areaCode" component={areaCode} max={3} type="text" />
     <Field id="firstThree" name="firstThree" component={firstThree} max={3} type="text" />
     <Field id="lastFour" name="lastFour" component={lastFour} max={4} type="text" />
</form>

The component for each Field looks like this (they are similar so I'll just show one to illustrate my point)

const areaCode = (field) => (
        <input
            {...field.input}
            maxLength={field.max}
            type="text"
            onChange={(value) => {
                // switch to next field (firstThree)
                // after this field's length is >= 3
            }}
        />
)

I want to automatically switch to the second field after the user has inputted 3 numbers in the first field. How does one switch to the next field programmatically?

I'm not sure how to reference the second field in the form to switch to when they blur away from the first field.

Am i doing this the right way? Should I be using Fields instead of Field ?

Answer 1

Edit: To automatically switch to the next field upon hitting the maxLength, you could use onChange() and ref . The onChange() handler checks if the current input is at its max length. If it is, focus() on the next ref 'd input on your react page.

Example: jsfiddle.net/4np9u17g/11

---

You should not need any sort of onBlur() function or have code to handle switching to the next input upon clicking tab. The browser will automatically focus on the input upon clicking tab.

It looks like you are using redux-form's Field correctly - you have defined a separate component for each part of the phone number, so you should use Field for each component (as you have already done). If, instead, you wanted to combine all of these inputs into one component, then you would need to use Fields . But, as you are now, you should be good.