feat(ui/docs): add disable-tab-select to q-select component along wit… (

#17362)

feat(ui/docs): add disable-tab-select to q-select component along with supporting documentation

docs/src/examples/QSelect/DisableTabSelection.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="q-pa-md" style="max-width: 300px">
+    <div class="q-gutter-md">
+      <q-select
+        filled
+        v-model="model"
+        :options="options"
+        stack-label
+        disable-tab-selection
+        label="Standard"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup () {
+    return {
+      model: ref(null),
+      options: [
+        'Google', 'Facebook', 'Twitter', 'Apple', 'Oracle'
+      ]
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/select.md

@@ -135,6 +135,10 @@ You can dynamically load new options when scroll reaches the end:
 
 <DocExample title="Menu covering component" file="OptionCover" />
 
+### Disable tab telection
+
+<DocExample title="Disable Tab Selection" file="DisableTabSelection" />
+
 ## The display value
 
 <DocExample title="Custom display value" file="DisplayCustomValue" />
@@ -260,8 +264,8 @@ When the list of options is opened:
   - pressing <kbd>PAGE UP</kbd> or <kbd>PAGE DOWN</kbd> will navigate one page up or down in the list of options
   - pressing <kbd>HOME</kbd> or <kbd>END</kbd> will navigate to the start or end of the list of options (only if you are not using `use-input`, or the input is empty)
   - when navigating using arrow keys, navigation will wrap when reaching the start or end of the list
-  - pressing <kbd>ENTER</kbd> (or <kbd>SPACE</kbd> when `use-input` is not set, or <kbd>TAB</kbd> when `multiple` is not set) when an option is selected in the list will:
-    - select the option and close the list of options if `multiple` is not set
+  - pressing <kbd>ENTER</kbd> (or <kbd>SPACE</kbd> when `use-input` is not set, or <kbd>TAB</kbd> when `multiple` and `disable-tab-selection` are not set) when an option is selected in the list will:
+    - select the option and close the list of options if `multiple` and `disable-tab-selection` are not set
     - toggle the option if `multiple` is set
 
 ## Native form submit

ui/src/components/select/QSelect.js

@@ -91,6 +91,7 @@ export default createComponent({
     },
 
     mapOptions: Boolean,
+    disableTabSelection: Boolean,
     emitValue: Boolean,
 
     inputDebounce: {
@@ -716,6 +717,7 @@ export default createComponent({
         && (props.newValueMode !== void 0 || props.onNewValue !== void 0)
 
       const tabShouldSelect = e.shiftKey !== true
+        && props.disableTabSelection !== true
         && props.multiple !== true
         && (optionIndex.value !== -1 || newValueModeValid === true)
 

ui/src/components/select/QSelect.json

@@ -277,6 +277,12 @@
       "category": "options"
     },
 
+    "disable-tab-selection": {
+      "type": "Boolean",
+      "desc": "Prevents the tab key from confirming the currently hovered option",
+      "category": "options"
+    },
+
     "emit-value": {
       "type": "Boolean",
       "desc": "Update model with the value of the selected option instead of the whole option",