q-select tab key

[thescript]

q-select pressing tab key will clear the current value and move on to the next component/element.

 <q-select label="Recipients"
                          v-model="recipients"
                          use-input
                          use-chips
                          multiple
                          hide-dropdown-icon
                          input-debounce="0"
                          new-value-mode="add-unique"
                          stack-label
                          @new-value="newValue">
</q-select>

How to prevent this behavior or somehow customize the q-select component to accept tab key have the same function as the Enter key?

[metalsadman]

@thescript use a listener @keydown.tab="handler".

[thescript]

@metalsadman thank you, how to retain the value being inputted , does that be inside the event handler?

[metalsadman]

@thescript take note of this https://quasar.dev/vue-components/select#Keyboard-navigation, and here’s how you do it https://codepen.io/metalsadman/pen/jOMexgy?editors=101. i don’t get what you mean by retain the value being inputted, if you want to keep what you typed then just comment out this line this.$refs.sel.updateInputValue('').

[thescript]

@metalsadman thank you for the example it helps me a lot. How about if you input a value and then you clicked outside of the q-select/component, how to retain the value being inputted? would the mouseleave or mouseout events would suffice with this kind of implementation?

[metalsadman]

@thescript same concept as above, just different listener something like @blur then using updateInputValue(currentInputValue). Check out the api https://quasar.dev/vue-components/select#QSelect-API.

[thescript]

@metalsadman thank you!