Send empty string and null

[Densyakun]

Prerequisites

• I have read the documentation

What theme are you using?

mui

What is your question?

Goal

• I want to allow empty string in a string single field.
• I want to allow empty string in string array values.
• I want to get data by onChange() function when an element is added to an array.
• For arrays of strings, I want to unify null values and undefined with empty string ("").

"dependencies": {
  "@rjsf/core": "^5.24.8",
  "@rjsf/mui": "^5.24.8",
  "@rjsf/utils": "^5.24.8",
  "@rjsf/validator-ajv8": "^5.24.8",
},

Issue

• Hard to figure out how to make it possible to send even an empty string.
• In the case of an array of strings, there is a pattern of empty and null value before and after editing, which causes bugs.
• For numeric arrays, there are undefined and null value patterns before and after editing.
• The data before editing must correspond to an empty, undefined, or null pattern in the called onChange() function.
  • To unify with empty string, null or undefined in received data must be set to empty string.
  • In the case of an array of strings, set the default property to "" will unify empty strings with null values and allow them to be sent before editing.
  • In the case of an array of numbers, setting the default property to null will unify undefined and null values and allow them to be sent before editing.
  • If the default property is not defined, even for an array of strings, the value may be undefined before editing.

How to send an empty string

const schema = {
  type: ["string", "null"],
  default: "",
};

• Single field returns “”.
• For array elements, returns “” before editing, null after editing.

const schema = {
  type: ["number", "null"],
  default: null,
};

• In the case of an array of numbers, adding a new element causes the value to be undefined, and an empty string after editing becomes null.

Other patterns

const schema = {
  type: ["string", "null"],
};

• In the live demo, FormData returns null both before and after editing.
• In my app, it returns undefined before editing and null after editing.
• I get a must be string,null error when I try to submit before editing.

const schema = {
  type: ["string", "null"],
  default: null,
};

• FormData is null both before and after editing in the live demo and in my app.
• I get a must be string,null error when I try to submit before editing.

const schema = {
  type: ["number", "null"],
};

• In the case of an array of numbers, adding a new element causes the value to be undefined, and an empty string after editing becomes null.
• I get a must be string,null error when I try to submit before editing.

Other patterns we have tested include the following, but to no avail:

• required: []
• minLength: 0
• Form Component
  • noValidate
  • noHTML5Validate
• UI Schema
  • "ui:emptyValue": ""

See also:

• Empty string passing custom validation for required fields, but doesn't pass browser validation #289

[heath-freenome]

@Densyakun I'm struggling to follow your question. The following works for string in this playground:

{
  "type": "string",
  "default": ""
}

This playground shows [number,null] working