diff --git a/docs/input.md b/docs/input.md index 0adafe77c..68225799c 100644 --- a/docs/input.md +++ b/docs/input.md @@ -692,6 +692,8 @@ An array of strings (or objects with a `text` property, if you add the `property * **validate.max** - Maximum number of items that the field must not exceed * **validate.requiredMessage** - Will appear when required validation fails * **validate.maxMessage** - Will appear when maximum validation fails +* **restrictItemCreation** - boolean that prevents the addition of new items to the list if set to true, but allows the addition of values displayed by autocomplete. If it isn't present, all items can be added to the list +* **restrictedErrorMessage** - message that is displayed when the user is prevented from adding an item ```yaml - diff --git a/docs/inputs.md b/docs/inputs.md index 4847d322f..830322dcd 100644 --- a/docs/inputs.md +++ b/docs/inputs.md @@ -577,6 +577,8 @@ An array of strings (or objects with a `text` property, if you add the `property * **validate.max** - maximum number of items that the field must not exceed * **validate.requiredMessage** - will appear when required validation fails * **validate.maxMessage** - will appear when maximum validation fails +* **restrictItemCreation** - boolean that prevents the addition of new items to the list if set to true, but allows the addition of values displayed by autocomplete. If it isn't present, all items can be added to the list +* **restrictedErrorMessage** - message that is displayed when the user is prevented from adding an item ```yaml - diff --git a/inputs/simple-list-input.vue b/inputs/simple-list-input.vue index 731687cc3..6ccba0df0 100644 --- a/inputs/simple-list-input.vue +++ b/inputs/simple-list-input.vue @@ -57,10 +57,11 @@ import autocomplete from './autocomplete.vue'; export default { - props: ['items', 'allowRepeatedItems', 'autocomplete', 'currentItem', 'disabled', 'isInitialFocus', 'ignoreComma'], + props: ['items', 'allowRepeatedItems', 'autocomplete', 'currentItem', 'disabled', 'isInitialFocus', 'ignoreComma', 'restrictItemCreation'], data() { return { val: '', + autocompleteValue: false, autocompleteIndex: null, autocompleteOptions: [], displayAutocomplete: true @@ -97,6 +98,15 @@ }, // Add an item to the array addItem() { + // Only saves values from the autocomplete list if tag creation restriction is enabled + if (this.restrictItemCreation) { + if (!this.autocompleteValue && !_.isNumber(this.autocompleteIndex)) { + this.$emit('triggerRestrictionError'); + return; + } + } + this.autocompleteValue = false; + let hasItem; if (_.isNumber(this.autocompleteIndex)) { @@ -115,6 +125,7 @@ }, onAutocompleteSelect(val) { this.val = val; + this.autocompleteValue = true; this.addItem(); }, onEnter() { diff --git a/inputs/simple-list.vue b/inputs/simple-list.vue index f6a8761e7..eedaf2c3c 100644 --- a/inputs/simple-list.vue +++ b/inputs/simple-list.vue @@ -16,7 +16,9 @@ * **validate.max** - maximum number of items that the field must not exceed * **validate.requiredMessage** - will appear when required validation fails * **validate.maxMessage** - will appear when maximum validation fails - + * **restrictItemCreation** - boolean that prevents the addition of new items to the list if set to true, but allows the addition of values displayed by autocomplete. If it isn't present, all items can be added to the list + * **restrictedErrorMessage** - message that is displayed when the user is prevented from adding an item + ```yaml - fn: simple-list @@ -79,15 +81,18 @@ :currentItem="currentItem" :disabled="isDisabled || disabled" :isInitialFocus="initialFocus === name" + :restrictItemCreation="args.restrictItemCreation" @add="addItem" @select="selectItem" @focus="onFocus" @blur="onBlur" @resize="onResize" + @triggerRestrictionError="onTriggerRestrictionError" + @click.native="disableRestrictionError" + @keydown.delete.native="disableRestrictionError" v-dynamic-events="customEvents"> -