From c7243d25dc8be001206e01d8dc817ddb8506017d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 4 Aug 2022 17:20:01 +0300
Subject: [PATCH] Fixed #2826 - SelectButton | new `unselectable` property

---
 api-generator/components/selectbutton.js      | 6 ++++++
 src/components/selectbutton/SelectButton.d.ts | 4 ++++
 src/components/selectbutton/SelectButton.vue  | 8 ++++++++
 src/views/selectbutton/SelectButtonDoc.vue    | 6 ++++++
 4 files changed, 24 insertions(+)

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 {
                         <td>false</td>
                         <td>When specified, allows selecting multiple values.</td>
                     </tr>
+                    <tr>
+                        <td>unselectable</td>
+                        <td>boolean</td>
+                        <td>true</td>
+                        <td>Whether selection can be cleared.</td>
+                    </tr>
                     <tr>
                         <td>disabled</td>
                         <td>boolean</td>