React-final-form: Get Field Component via refs

[erickjth]

Are you submitting a bug report or a feature request?

feature request

What is the current behavior?

There is no a way to get Field components via refs.

What is the expected behavior?

Access to the rendered component in a Field <Field {....} component={MyCustomField} />.

What's your environment?

• final-form": "^4.2.0"
• react-final-form": "^3.1.0

Other information

I am using this library in a React Native App, so the behavior that I would like to implement is this: Focus a field when clicking on "Next" key in the virtual keyboard on iOS.

[bogdansoare]

also having the same issue

[ibratoev]

You can use a simple func to render your component like:

renderMyCustomField = props => <MyCustomField {...props} ref={customFieldRef] />
...
<Field {....} component={this.renderMyCustomField } />

[erickjth]

Would be nice to have the official Forwarding Refs API implemented in each component to pass down the reference.

[TylerRick]

Yes, this is a must-have. I was very surprised when I tried adding a ref to a Field and it didn't work. (It gave me a ref to the Field component instead.)

Shouldn't be too hard to add this... Take a look at material-ui, for example. They wrap pretty much everything in a forwardRef, and also provide an inputRef if you want the ref for the input instead of the root/container element (such as FormControl). (I don't think there's any need for a separate inputRef for Field though.)

To do:

• [ ] Wrap Field with forwardRef()
• [ ] Mention ref on https://final-form.org/docs/react-final-form/types/FieldProps. Maybe just say "The ref is forwarded to the root element." like they do on https://material-ui.com/api/input/.

For what it's worth, here's the workaround I'm using (similar to @ibratoev's but using inline component so you don't have to come up externally create and name a wrapper component for each input component you're using):

Change:

                component="input"

to:

                component={props => <input {...props} ref={inputEl} />}

(Working demo here: https://codesandbox.io/s/react-final-form-how-to-get-ref-ekc6m)

[kopax]

I am using react-native and react-final-form and this is kind of deal breaker not to have the forward ref, because I can't solve the UX requirement as follow: https://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar

Any update on this ?

[kopax]

Hi and thanks @erikras for taking care of it, this could remain open till we can test it on our end don't you think?

[erikras]

Published fix in v6.5.0.