Option to disable tab selection on q-select

[phtech-blakebless]

Summary

Introduce a new property, disableTabSelection, to the q-select component in Quasar Framework. This property aims to disable the current native functionality where the tab key confirms q-select options when hovering over an option.

Motivation

In certain use cases, the default behavior of the tab key confirming a q-select option on hover can lead to unintended selections and disrupt the user experience. Providing a way to disable this behavior will allow developers to have more control over the interaction model of their applications, leading to improved usability and preventing accidental selections.

Proposed Solution

Add a new Boolean property, disableTabSelection, to the q-select component. When this property is set to true, the tab key will not confirm the currently hovered option.

Implementation Details

1. Property Definition:

   props: {
     disableTabSelection: {
       type: Boolean,
       default: false
     }
   }

2. Behavior Adjustment:
   Modify the keyboard event handling within the q-select component to respect the disableTabSelection property. When disableTabSelection is true, the tab key should navigate out of the q-select without confirming the selection.

Usage Example

<q-select
  v-model="selectedOption"
  :options="options"
  disableTabSelection
/>

In the above example, the 'q-select' component will not confirm the hovered option when the tab key is pressed.

Benefits

• Improved User Experience: Prevents accidental selections, especially in forms where tab navigation is critical.
• Increased Flexibility: Allows developers to tailor the behavior of q-select to better fit the needs of their applications.
• Backward Compatibility: As an opt-in feature, existing functionality remains unchanged unless the property is explicitly used.

Potential Drawbacks

• Additional Complexity: Slight increase in the complexity of the q-select component's codebase.
• Learning Curve: Developers need to be aware of and understand the new property to make use of it effectively.

Conclusion

Adding the disableTabSelection property to the q-select component will provide developers with a valuable tool to enhance user interaction and prevent unintended selections. This small yet impactful change aligns with Quasar's commitment to flexibility and user-centric design.

[ivanjaros]

this is because q-select uses q-menu and q-list. when you tab-out of it, it closes it(and possibly picks the currently selected option). that is normal behavior, even described here https://quasar.dev/vue-components/select#keyboard-navigation
there is no reason to change anything because why would you tab when you have options list opened and expect tab to do something else but to focus the next element in the form?

you can see the native behavior is the same https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

[phtech-blakebless]

Hey @ivanjaros,

Thank you for the detailed feedback and for the discussion on this topic. I understand your points about maintaining consistency with native behavior and user expectations.

Given the feedback from our users and the flexibility this change can offer, I believe providing this optional functionality will be beneficial for a subset of users with different navigation preferences. However, I understand if there’s a need to keep the default behavior intact for now.

I appreciate your insights and will consider your perspective as we move forward. Thanks again for your time and input!

[ivanjaros]

As I have said, you can wrap q-select into your own component with additional logic to provide this functionality. But in the end, there is no way your proposal will make it into Quasar based on the aforementioned breaking change towards standard select element behavior. so I suggest you just close this.

Note that I am not from the dev team, I am merely user.

[phtech-blakebless]

I appreciate your feedback and now understand that the tab selection is standard behavior beyond Quasar. I'll leave the customization option up, as I believe it offers a valuable way for users to disable this native functionality if they prefer.

[phtech-blakebless]

@ivanjaros #17362