diff --git a/api-generator/components/selectbutton.js b/api-generator/components/selectbutton.js index 427a71ac9..a7e5a05da 100644 --- a/api-generator/components/selectbutton.js +++ b/api-generator/components/selectbutton.js @@ -47,6 +47,12 @@ const SelectButtonProps = [ default: "null", description: "A property to uniquely identify an option." }, + { + name: "unselectable", + type: "boolean", + default: "true", + description: "Whether selection can be cleared." + }, { name: "aria-labelledby", type: "string", diff --git a/src/components/selectbutton/SelectButton.d.ts b/src/components/selectbutton/SelectButton.d.ts index 3ee6a7344..2e8b9c142 100755 --- a/src/components/selectbutton/SelectButton.d.ts +++ b/src/components/selectbutton/SelectButton.d.ts @@ -51,6 +51,10 @@ export interface SelectButtonProps { * A property to uniquely identify an option. */ dataKey?: string | undefined; + /** + * Whether selection can be cleared. + */ + unselectable?: boolean | undefined; /** * Identifier of the underlying element. */ diff --git a/src/components/selectbutton/SelectButton.vue b/src/components/selectbutton/SelectButton.vue index 2a8015873..a7801b5a5 100755 --- a/src/components/selectbutton/SelectButton.vue +++ b/src/components/selectbutton/SelectButton.vue @@ -23,6 +23,10 @@ export default { optionValue: null, optionDisabled: null, multiple: Boolean, + unselectable: { + type: Boolean, + default: true + }, disabled: Boolean, dataKey: null, 'aria-labelledby': { @@ -67,6 +71,10 @@ export default { } let selected = this.isSelected(option); + if (selected && !this.unselectable) { + return; + } + let optionValue = this.getOptionValue(option); let newValue; diff --git a/src/views/selectbutton/SelectButtonDoc.vue b/src/views/selectbutton/SelectButtonDoc.vue index 3d57fc269..f608bb731 100755 --- a/src/views/selectbutton/SelectButtonDoc.vue +++ b/src/views/selectbutton/SelectButtonDoc.vue @@ -106,6 +106,12 @@ export default {