diff --git a/README.md b/README.md index 02a865bf1d..bb9e535263 100644 --- a/README.md +++ b/README.md @@ -547,6 +547,23 @@ const uiSchema = { }; ``` +Care should be taken when using the `required` property with arrays. An empty array is sufficient to pass that validation check. If you wish to ensure the user populates the array, you can specify the minimum number of items the user must select with the `minItems` property. + +Example: + +```js +const schema = { + type: "array", + minItems: 2, + title: "A multiple choices list", + items: { + type: "string", + enum: ["foo", "bar", "fuzz", "qux"], + }, + uniqueItems: true +}; +``` + By default, checkboxes are stacked but if you prefer them inline: ```js diff --git a/src/components/widgets/BaseInput.js b/src/components/widgets/BaseInput.js index 4710a0c6ef..32d59362ef 100644 --- a/src/components/widgets/BaseInput.js +++ b/src/components/widgets/BaseInput.js @@ -8,13 +8,15 @@ function BaseInput(props) { value, readonly, autofocus, - onChange, options, // eslint-disable-line schema, // eslint-disable-line formContext, // eslint-disable-line registry, // eslint-disable-line ...inputProps } = props; + const _onChange = ({target: {value}}) => { + return props.onChange(value === "" ? undefined : value); + }; return ( onChange(event.target.value)}/> + onChange={_onChange} /> ); } diff --git a/src/components/widgets/TextareaWidget.js b/src/components/widgets/TextareaWidget.js index d7be10236a..38d665811c 100644 --- a/src/components/widgets/TextareaWidget.js +++ b/src/components/widgets/TextareaWidget.js @@ -12,6 +12,9 @@ function TextareaWidget({ autofocus, onChange }) { + const _onChange = ({target: {value}}) => { + return onChange(value === "" ? undefined : value); + }; return (