How to autofocus a field in a form

General
1

Hi, is there a way to autofocus a form or specific field of a form when it’s rendered?

I am sending schema and uischema to frontend from backend and generate form based on that.

Here is the example:

Screenshot 2021-10-05 at 15.15.36
Screenshot 2021-10-05 at 15.15.361224×990 97.3 KB

I’ve noticed that when I’ve default values such as booleans, they are only set when user interacts with the form. So I was wondering can I trigger autofocus when form is rendered?

2

Hi @irakli-g,

the React Material renderer set supports a focus: true UI Schema option, e.g.

{
  type: 'Control',
  scope: '#/properties/name',
  options: {
    focus: true
  }
}

The renderers then set Material UI’s autoFocus prop.

Regarding your code, you don’t need to switch between two JsonForms components to prevent handing over null. Setting data to undefined is the same as not handing it over so, so you can just use this:

<JsonForms
  data={formData ?? undefined}
  ....
/>
1 Like