focus method doesn't work

[ha3]

Hello,

I try to focus another input with field.focus() but it doesn't work.

Below, form.$('password').focus() doesn't focus to the next CustomInput.

<CustomInput
    field={form.$('email')}
    ref={(input) => this.emailInputRef = input}
    returnKeyType='next'
    onSubmitEditing={() => form.$('password').focus()}
    blurOnSubmit={false}
/>

<CustomInput
    field={form.$('password')}
    ref={(input) => this.passwordInputRef= input}
/>

const CustomInput = observer(React.forwardRef(({ field, ...restProps }, ref) => (
    <Input
        {...field.bind()}
        {...restProps}
        ref={ref}
        onChangeText={field.sync}
        onFocus={field.onFocus}
        onBlur={field.onBlur}
        value={field.value}
    />
));

[foxhound87]

Maybe you should bind the autoFocus prop to your component, or use the bind() method with the spread operator which is simpler.

[ha3]

Thank you. I couldn't understand the second part of your answer. Could you please elaborate? For the first part, I added autoFocus prop to my CustomInput as below but it didn't work:

const CustomInput = observer(React.forwardRef(({ field, ...restProps }, ref) => (
    <Input
        {...field.bind()}
        {...restProps}
        ref={ref}
        onChangeText={field.sync}
        onFocus={field.onFocus}
        onBlur={field.onBlur}
        autoFocus={field.focused}
        value={field.value}
    />
));

[foxhound87]

I mean autoFocus={field.autoFocus},
but it should be already binded if you use {...field.bind()}.
I also see that you mixed {...field.bind()} with other props that are not required except for onChangeText (because you are using react-native).

this should be enough:

const CustomInput = observer(React.forwardRef(({ field, ...restProps }, ref) => (
    <Input
        {...field.bind()}
        {...restProps}
        ref={ref}
        onChangeText={field.onChange}
    />
));

also, are you sure that onSubmitEditing has been executed?

[ha3]

I checked with console log and onSubmitEditing seems to be executed. But it doesn't focus to the next field and next field's focused state doesn't change either.

[foxhound87]

Can you provide a codesandbox?

[ha3]

Here: https://codesandbox.io/s/react-native-m4jdu

Since a keyboard doesn't show up when a TextInput is clicked on codesandbox, onSubmitEditing seems untestable. So, I added an extra button for you to test focus method.

[foxhound87]

maybe this issue occurs only in react native,
temporarily you can use:

onSubmitEditing={() => this.passwordInputRef.focus()}

[foxhound87]

I see that occurs also with react (not native)
I created an example in codesandbox
https://codesandbox.io/s/form-focus-d4ttb

[github-actions]

🎉 This issue has been resolved in version 5.6.0 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀