How to set field autoFocus?

[sneas]

Hi, thank you for mobx-react-form!

Is it possible to set up autoFocus of a particular field to true through the field configuration without calling focus() method explicitly?

This way obviously isn't working:

const form = new MobxReactForm({
    fields: [
        {
            name: 'firstName',
            label: 'First Name',
            autoFocus: true,
        },
    ],
});

console.log(form.$('firstName').bind().autoFocus); // false

[foxhound87]

It is not possible because it should eventually unfocus also all other fields recursively if you use autoFocus: true for more fields. I don't think it is a good idea to allow focus in this way.

You can use hooks like this:

new MobxReactForm({
  fields: [{
    name: 'firstName',
    label: 'First Name',
  }],
}, {
  hooks: {
    onInit(form) {
      form.$('firstName').focus();
    }
  }
});

[foxhound87]

If it doesn't work yet use createRef and forwardRef:
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 📦🚀