Controlled form resets focus on every keystroke

[joesaunderson]

Prerequisites

• I have searched the existing issues
• I understand that providing a SSCCE example is tremendously useful to the maintainers.
• I have read the documentation
• Ideally, I'm providing a sample JSFiddle, Codesandbox.io or preferably a shared playground link demonstrating the issue.

What theme are you using?

core

Version

5.x

Current Behavior

When using the form in controlled mode, every keystroke into the form resets the forms focus.

Example:

const App = () => {
  const [formData, setFormData] = React.useState(null);
  return (
    <Form
      schema={{ type: 'string' }}
      formData={formData}
      onChange={(e) => setFormData(e.formData)}
      validator={validator}
    />
  );
};

Expected Behavior

It should maintain the focus state of the element.

Steps To Reproduce

Run the above code, type into the form.

Environment

React 18

Anything else?

Linked to #391 (changing to controlled form as a workaround due to the attached issue).

[nickgros]

@joesaunderson I cannot reproduce this in this CodeSandbox, is there something I failed to capture here?

[joesaunderson]

@joesaunderson I cannot reproduce this in this CodeSandbox, is there something I failed to capture here?

Hey, the only difference is we're styling the form, reproducible example (with no fields being overriden, but the methods the same)

https://codesandbox.io/p/devbox/rjsf-v5-4544-reproduction-forked-dm5cmw

[nickgros]

@joesaunderson Sorry for the delayed response. Focus is lost because the ThemedForm component is re-created on each render (you are violating this rule). You can fix this if you pull the call to generateForm outside of your Form component, e.g.

const ThemedForm = generateForm<T, S, F>();

/**
 * Override the default form element to add custom classes and styles.
 *
 * https://github.com/rjsf-team/react-jsonschema-form/blob/main/packages/core/src/components/Form.tsx
 */
const Form = <
  T = any,
  S extends StrictRJSFSchema = RJSFSchema,
  F extends FormContextType = any
>(
  props: FormProps<T, S, F>
) => {

  // We add a custom widget for the terms and conditions checkbox, which is basically a checkbox with a label that has
  // links in it.
  const customWidgets = {};

  return <ThemedForm {...props} widgets={customWidgets} />;
};

export default Form;