diff --git a/src/components/widgets/SelectWidget.js b/src/components/widgets/SelectWidget.js index a5ef160355..e61139a4e2 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 && } + {!multiple && schema.default === undefined && ( + + )} {enumOptions.map(({ value, label }, i) => { const disabled = enumDisabled && enumDisabled.indexOf(value) != -1; return ( diff --git a/test/NumberField_test.js b/test/NumberField_test.js index b265e8e642..687fa65766 100644 --- a/test/NumberField_test.js +++ b/test/NumberField_test.js @@ -290,5 +290,76 @@ describe("NumberField", () => { expect(node.querySelector("select").id).eql("root"); }); + + it("should render a select element with a blank option, when default value is not set.", () => { + const schema = { + type: "object", + properties: { + foo: { + type: "number", + enum: [0], + }, + }, + }; + + const { node } = createFormComponent({ + schema, + }); + + const selects = node.querySelectorAll("select"); + expect(selects[0].value).eql(""); + + const options = node.querySelectorAll("option"); + expect(options.length).eql(2); + expect(options[0].innerHTML).eql(""); + }); + + it("should render a select element without a blank option, if a default value is set.", () => { + const schema = { + type: "object", + properties: { + foo: { + type: "number", + enum: [2], + default: 2, + }, + }, + }; + + const { node } = createFormComponent({ + schema, + }); + + const selects = node.querySelectorAll("select"); + expect(selects[0].value).eql("2"); + + const options = node.querySelectorAll("option"); + expect(options.length).eql(1); + expect(options[0].innerHTML).eql("2"); + }); + + it("should render a select element without a blank option, if the default value is 0.", () => { + const schema = { + type: "object", + properties: { + foo: { + type: "number", + enum: [0], + default: 0, + }, + }, + }; + + const { node } = createFormComponent({ + schema, + }); + + const selects = node.querySelectorAll("select"); + expect(selects[0].value).eql("0"); + + const options = node.querySelectorAll("option"); + expect(options.length).eql(1); + expect(options[0].innerHTML).eql("0"); + }); }); }); diff --git a/test/StringField_test.js b/test/StringField_test.js index 2846031cfd..9c34a783c9 100644 --- a/test/StringField_test.js +++ b/test/StringField_test.js @@ -350,6 +350,69 @@ describe("StringField", () => { expect(node.querySelector("#custom")).to.exist; }); + + it("should render a select element with first option 'false' if 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"); + 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[0].innerHTML).eql(""); + expect(options.length).eql(2); + }); + + it("should render only one empty option 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[0].innerHTML).eql(""); + expect(options.length).eql(1); + }); }); describe("TextareaWidget", () => {