From c600eaee414b5f0a4fc8d1ae565e23171fe4127d Mon Sep 17 00:00:00 2001
From: Razvan Stoenescu <razvan.stoenescu@gmail.com>
Date: Tue, 17 Oct 2023 17:52:07 +0300
Subject: [PATCH] fix(QSelect): backspace behavior #16481

---
 docs/src/pages/vue-components/select.md | 3 +++
 ui/src/components/select/QSelect.js     | 4 ++++
 2 files changed, 7 insertions(+)

diff --git a/docs/src/pages/vue-components/select.md b/docs/src/pages/vue-components/select.md
index f4b3b8396e2..de70f0068e6 100644
--- a/docs/src/pages/vue-components/select.md
+++ b/docs/src/pages/vue-components/select.md
@@ -246,6 +246,9 @@ When QSelect is focused:
     - pressing <kbd>SHIFT</kbd> + <kbd>TAB</kbd> will navigate backwards through the QChips (if a QChip is selected <kbd>TAB</kbd> will navigate forward through the QChips)
     - pressing <kbd>ENTER</kbd> when a QChip is selected will remove that option from the selection
     - pressing <kbd>BACKSPACE</kbd> will remove the last option from the selection (when `use-input` is set the input should be empty)
+  - pressing <kbd>BACKSPACE</bkd> when `clearable` is set then:
+    - it clears the model (with `null` value) for single selection
+    - it removes the last added value for multiple selection
   - pressing <kbd>TAB</kbd> (or <kbd>SHIFT</kbd> + <kbd>TAB</kbd> if `use-chips` is not set or the first QChip is selected) will navigate to the next or previous focusable element on page
   - typing text (<kbd>0</kbd> - <kbd>9</kbd> or <kbd>A</kbd> - <kbd>Z</kbd>) if `use-input` is not set will:
     - create a search buffer (will be reset when a new key is not typed for 1.5 seconds) that will be used to search in the options labels
diff --git a/ui/src/components/select/QSelect.js b/ui/src/components/select/QSelect.js
index d27c26c8d98..10afb09bf22 100755
--- a/ui/src/components/select/QSelect.js
+++ b/ui/src/components/select/QSelect.js
@@ -751,6 +751,10 @@ export default createComponent({
       // backspace
       if (
         e.keyCode === 8
+        && (
+          props.useChips === true
+          || props.clearable === true
+        )
         && props.hideSelected !== true
         && inputValue.value.length === 0
       ) {