Repository: mozilla-services/react-jsonschema-form
Pull request #1163 (2019-02-02 07:21:23)

Feature/fix enum empty bug
Fixed the bug. The selector have an empty option, when use enum and the default value is 0 or false or ''.

### Reasons for making this change

[Please describe them here]

Fixed the bug. The selector have an empty option, when use enum and the default value is 0 or false or ''.


### Checklist

* [ ] **I'm updating documentation**
  - [ ] I've [checked the rendering](https://react-jsonschema-form.readthedocs.io/en/latest/#contributing) of the Markdown text I've added
* [x] **I'm adding or updating code**
  - [x] I've added and/or updated tests
  - [ ] I've updated [docs](https://react-jsonschema-form.readthedocs.io/) if needed
  - [x] I've run `npm run cs-format` on my branch to conform my code to [prettier](https://github.com/prettier/prettier) coding style
* [ ] **I'm adding a new feature**
  - [ ] I've updated the playground with an example use of the feature



Patch:
diff --git a/src/components/widgets/SelectWidget.js b/src/components/widgets/SelectWidget.js
index a5ef16035..e61139a4e 100644
--- a/src/components/widgets/SelectWidget.js
+++ b/src/components/widgets/SelectWidget.js
@@ -91,7 +91,9 @@ function SelectWidget(props) {
         const newValue = getValue(event, multiple);
         onChange(processValue(schema, newValue));
       }}>
-      {!multiple && !schema.default && <option value="">{placeholder}</option>}
+      {!multiple && schema.default === undefined && (
+        <option value="">{placeholder}</option>
+      )}
       {enumOptions.map(({ value, label }, i) => {
         const disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
         return (


Test patch:
diff --git a/test/NumberField_test.js b/test/NumberField_test.js
index b265e8e64..456dcd2bd 100644
--- a/test/NumberField_test.js
+++ b/test/NumberField_test.js
@@ -290,5 +290,82 @@ describe("NumberField", () => {
 
       expect(node.querySelector("select").id).eql("root");
     });
+
+    it("should render a select element if set the enum.", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "number",
+            enum: [0],
+          },
+        },
+      };
+
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      const selects = node.querySelectorAll("select");
+      expect(selects).to.have.length.of(1);
+    });
+
+    it("should render a select element and it's value is empty, if set the enum and the default value is undefined.", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "number",
+            enum: [0],
+          },
+        },
+      };
+
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      const selects = node.querySelectorAll("select");
+      expect(selects[0].value).eql("");
+    });
+
+    it("should render a select element and it's first option has an empty innerHTML, if set the enum and the default value is undefined.", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "number",
+            enum: [0],
+          },
+        },
+      };
+
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      const options = node.querySelectorAll("option");
+      expect(options[0].innerHTML).eql("");
+    });
+
+    it("should render a select element and it's first option is '0', if set the enum and the default value is 0.", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "number",
+            enum: [0],
+            default: 0,
+          },
+        },
+      };
+
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      const options = node.querySelectorAll("option");
+      expect(options[0].innerHTML).eql("0");
+    });
   });
 });
diff --git a/test/StringField_test.js b/test/StringField_test.js
index 2846031cf..4382247b3 100644
--- a/test/StringField_test.js
+++ b/test/StringField_test.js
@@ -350,6 +350,86 @@ describe("StringField", () => {
 
       expect(node.querySelector("#custom")).to.exist;
     });
+
+    it("should render a select element and it's first option is 'false', if set the enum and the default value is false.", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "string",
+            enum: [false, true],
+            default: false,
+          },
+        },
+      };
+
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      const options = node.querySelectorAll("option");
+      expect(options[0].innerHTML).eql("false");
+    });
+
+    it("should render a select element and the option's length is equal the enum's length, if set the enum.", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "string",
+            enum: [false, true],
+            default: false,
+          },
+        },
+      };
+
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      const options = node.querySelectorAll("option");
+      expect(options.length).eql(2);
+    });
+
+    it("should render a select element and the option's length is equal the enum's length, if set the enum and the default value is empty.", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "string",
+            enum: ["", "1"],
+            default: "",
+          },
+        },
+      };
+
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      const options = node.querySelectorAll("option");
+      expect(options.length).eql(2);
+    });
+
+    it("shouldn't render two empty options, when the default value is empty.", () => {
+      const schema = {
+        type: "object",
+        properties: {
+          foo: {
+            type: "string",
+            enum: [""],
+            default: "",
+          },
+        },
+      };
+
+      const { node } = createFormComponent({
+        schema,
+      });
+
+      const options = node.querySelectorAll("option");
+      expect(options.length).eql(1);
+    });
   });
 
   describe("TextareaWidget", () => {