Skip to content

About form behavior when empty input is performed #5125

Description

@yap-house

Prerequisites

What theme are you using?

mui

Version

">=6.5.3"

Current Behavior

For fields with default set in JSONSchema, the input cannot be empty unless ui:emptyValue is specified in UISchema.

See: Example1

Also, if you specify ui:emptyValue in UISchema, it will not be able to recognize the empty value, so required will not work in form validation, or if you specify null, the validation result will be displayed as a type error instead of a required error.

See: Example2

In addition, up to v6.5.2, an empty field in the form data as an argument of the onChange event was undefined with a key, but from v6.5.3 the form data is passed without the field itself.Currently, in this development environment, there are many problems related to state management due to the RJSF version update.

JSON Schema:

{
  "type": "object",
  "properties": {
    "someStrings": { "type": "string" },
    "someNumbers": { "type": "number" }
  }
}

v6.5.2:

const [formData, setFormData] = useState({
  someStrings: undefined,
  someNumber: undefined,
});

<Form
  schema={schema}
  formData={formData}
  onChange={(e) => {
    console.log(e.formData);
    /*
     * // If the input value is empty
     * {
     *   someString: undefined,
     *   someNumber: undefined
     * }
     */
  }}
/>;

>=v6.5.3:

const [formData, setFormData] = useState({
  someStrings: undefined,
  someNumber: undefined,
});

<Form
  schema={schema}
  formData={formData}
  onChange={(e) => {
    console.log(e.formData);
    /*
     * // If the input value is empty
     * {
     * }
     */
  }}
/>;

Expected Behavior

As with v6.5.2, I think the following behavior is natural.

  • default takes effect only when the form is first displayed and allows empty input
  • The formData of onChange stores undefined with a key so that if the field is empty, it will be known that the field is unfilled.

Steps To Reproduce

Example1

  1. See: Example1
  2. Empty the value of each input item using the BackSpace key etc.
  3. You can confirm that the input field cannot be empty

Example2

  1. Example2
  2. Empty all input fields
  3. You can see that the required field allows empty and the optional field results in a type error.

Environment

- OS: Windows, macOS
- Node: v24.15.0
- npm: v11.12.1

Anything else?

This symptom appears to be an unintended side effect of the fix for #4518 introduced in v6.5.3.

Releases/v6.5.3

Fixed processPendingChange leaving optional object keys as undefined after clearing text inputs (invalid for AJV type: "string"), by unsetting keys for resolved non-oneOf/anyOf leaves while preserving explicit undefined for oneOf/anyOf branches, fixing #4518

Form.tsx

The fix for #4518 was valid — leaving undefined values in formData for type: "string" fields caused AJV type errors. However, this fix introduced the following tradeoffs:

  1. Fields with default can no longer be cleared. When the user empties an input, the default value is reapplied because the key is removed from formData and the schema default takes effect again.
  2. onChange no longer reports empty fields. Previously, formData included { someString: undefined } for empty fields, allowing callers to distinguish "field is present but empty" from "field was never set". Now the key is omitted entirely ({}), which breaks state management code that relies on key presence.

Would it be possible to address both constraints — for example, by using undefined with keys preserved in onChange while only stripping them at validation time, or by providing a way to opt in to the old behavior?

Thank you for taking a look at this.

Metadata

Metadata

Assignees

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions