Tcomb-form-native: Tab / next to next field

[auser]

It would be great to be able to tab from one field to the next or display "Next" on keyboard.

[gcanti]

Yes, it would be nice.
Generally if it can be done by hand and a rule exists, it can be automated by tcomb-form(-native).
Currently how you do that with react-native? Could you provide a gist?

[marcello3d]

Was this issue closed because of no gist or because the feature was added?

Here is an example of how to do it: http://stackoverflow.com/questions/32748718/react-native-how-to-select-the-next-textinput-after-pressing-the-next-keyboar

In short, add an onSubmitEditing attribute to the TextInput:

<TextInput 
...
  onSubmitEditing={(event) => { 
    this.refs.foo.focus(); 
  }}
/>

[gcanti]

Was this issue closed because...

Because of inactivity. BTW there's a solution for tcomb-form-native in the SO question you posted and that links to this issue https://github.com/gcanti/tcomb-form-native/issues/96 (no feature to add)

[marcello3d]

Excellent. Wasn't familiar with the getComponent api.

[yosiat]

@gcanti the solution in SO is very specific to specific form.
I would expect tcomb-form-native to handle this dynamically.

[AlanFoster]

This would be cool functionality to have; Is this something that tcomb-form-native should handle out of the box, or is that up to the user to control? 🤔

[alvaromb]

It could be handled by tcomb-form-native, enabled or disabled by a prop in the Form component. This is something we would like to have, how do you feel about sending a PR? I'm glad to review.

[leonapse]

Any update on this?

[quantumpotato]

+1, subscribing to thread

[dsuarezv]

I agree it'd be nice to have this inside tcomb-form-native. Just wanted to leave a possible workaround for anyone coming to this issue (like I did). Add this method to the component with the form:

addNext = (nextFieldName) => {
        return {
            returnKeyType: 'next',
            onSubmitEditing: () => { 
                // Assuming your form ref is stored in this.form, change to your needs. 
                const target = this.form.getComponent(nextFieldName);
                if (target && target.refs && target.refs.input) target.refs.input.focus();
            }
        }
    }

and then in the config of your fields simply add

fields: {
    name: { label: 'Name', ...this.addNext('surname') },
    surname: { label: 'Surname', ...this.addNext('address') },

}

[alina-beck]

I know this is an old topic – but this is still an issue!

I can't use the solution above because onSubmitEditing is not fired when hitting the next button on Android. Tried with onBlur instead, which is fired, but then target.refs is just an empty object, so I cannot focus the next input. Any advice on how to solve this?

Here is the simplified code:

const formRef = useRef();

const Name = t.struct({
    firstname: t.String,
    lastname: t.String,
});

const options = {
    order: ['firstname', 'lastname'],
    fields: {
        firstname: {
            placeholder: 'First Name',
            returnKeyType: 'next',
            onSubmitEditing: () => console.log('submit editing'), // never fired
            onBlur: () => formRef.current.getComponent('lastname').refs.input.focus(), // input is undefined
        },
        lastname: {
            placeholder: 'Last Name',
            returnKeyType: 'done',
        },
    },
};

return (
    <KeyboardAvoidingView behavior='position'>
        <Animatable.View animation='fadeInUp' duration={400}>
            <Form ref={formRef} type={Name} options={options} value={formData} onChange={handleFormChange} />
        </Animatable.View>
    <KeyboardAvoidingView>
);