Add an ui:emptyValue uiSchema option (rjsf-team#539)

The `ui:emptyValue` uiSchema directive allows having a field set to a default value when emptied.

Author: quentin-sommer

README.md

@@ -1294,10 +1294,12 @@ render((
 
 ### The case of empty strings
 
-When a text input is empty, the field in form data is set to `undefined`. String fields that use `enum` and a `select` widget work similarly and will have an empty option at the top of the options list that when selected will result in the field being `undefined`.
+When a text input is empty, the field in form data is set to `undefined`. String fields that use `enum` and a `select` widget will have an empty option at the top of the options list that when selected will result in the field being `undefined`.
 
 One consequence of this is that if you have an empty string in your `enum` array, selecting that option in the `select` input will cause the field to be set to `undefined`, not an empty string.
 
+If you want to have the field set to a default value when empty you can provide a `ui:emptyValue` field in the `uiSchema` object.
+
 ## Styling your forms
 
 This library renders form fields and widgets leveraging the [Bootstrap](http://getbootstrap.com/) semantics. That means your forms will be beautiful by default if you're loading its stylesheet in your page.

playground/samples/arrays.js

@@ -117,6 +117,9 @@ module.exports = {
     },
   },
   uiSchema: {
+    listOfStrings: {
+      items: { "ui:emptyValue": "" },
+    },
     multipleChoicesList: {
       "ui:widget": "checkboxes",
     },

playground/samples/simple.js

@@ -31,6 +31,7 @@ module.exports = {
   uiSchema: {
     firstName: {
       "ui:autofocus": true,
+      "ui:emptyValue": "",
     },
     age: {
       "ui:widget": "updown",

src/components/widgets/BaseInput.js

@@ -16,7 +16,7 @@ function BaseInput(props) {
     ...inputProps
   } = props;
   const _onChange = ({ target: { value } }) => {
-    return props.onChange(value === "" ? undefined : value);
+    return props.onChange(value === "" ? options.emptyValue : value);
   };
   return (
     <input

src/components/widgets/TextareaWidget.js

@@ -14,7 +14,7 @@ function TextareaWidget(props) {
     onBlur,
   } = props;
   const _onChange = ({ target: { value } }) => {
-    return onChange(value === "" ? undefined : value);
+    return onChange(value === "" ? options.emptyValue : value);
   };
   return (
     <textarea

test/StringField_test.js

@@ -113,6 +113,20 @@ describe("StringField", () => {
       expect(comp.state.formData).eql(undefined);
     });
 
+    it("should handle an empty string change event with custom ui:defaultValue", () => {
+      const { comp, node } = createFormComponent({
+        schema: { type: "string" },
+        uiSchema: { "ui:emptyValue": "default" },
+        formData: "x",
+      });
+
+      Simulate.change(node.querySelector("input"), {
+        target: { value: "" },
+      });
+
+      expect(comp.state.formData).eql("default");
+    });
+
     it("should fill field with data", () => {
       const { node } = createFormComponent({
         schema: {
@@ -325,6 +339,20 @@ describe("StringField", () => {
       expect(comp.state.formData).eql(undefined);
     });
 
+    it("should handle an empty string change event with custom ui:defaultValue", () => {
+      const { comp, node } = createFormComponent({
+        schema: { type: "string" },
+        uiSchema: { "ui:widget": "textarea", "ui:emptyValue": "default" },
+        formData: "x",
+      });
+
+      Simulate.change(node.querySelector("textarea"), {
+        target: { value: "" },
+      });
+
+      expect(comp.state.formData).eql("default");
+    });
+
     it("should render a textarea field with rows", () => {
       const { node } = createFormComponent({
         schema: { type: "string" },