fix(QSelect): backspace behavior #16481

quasarframework · Oct 17, 2023 · c600eae · c600eae
1 parent 08b58f2
commit c600eae
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git 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
@@ -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
       ) {