bug: select-popover focuses disabled input when no value provided

[andreas-aeschlimann]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When using an ion-select with the popover interface, a user can navigate the list with the arrow keys. A user would expect that the ENTER key would select an option (as in the native select element), but this does not work.

Additionally, the key navigation is not possible when the first option is disabled. The first option remains selected even if the arrow down key is pressed.

Expected Behavior

ENTER should select a highlighted option.

Arrow keys should work with disabled options.

Steps to Reproduce

See Stackblitz for minimal example

Code Reproduction URL

https://stackblitz.com/edit/ionic6-angular13-4e563q?file=src%2Fapp%2Fapp.component.html

Ionic Info

Ionic 7 Angular 15

Additional Information

No response

[liamdebeasi]

Hey there,

There are a couple things noted here, so I will reply to each individually:

1. Users should be able to press "Enter" to select an option in the popover select interface.

The popover single selection interface uses radios, and radios are not typically activated using the "Enter" key. We are working on clarifying our documentation surrounding this, but ion-select is not designed to match the <select> behavior despite the similar names. Instead, we have opted to follow the radio keyboard behaviors for this component.

2. When no value is selected the first option is focused even if it is disabled This is a bug in Ionic. I will have a PR up shortly.

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/28309, and a fix will be available in an upcoming release of Ionic Framework.

[andreas-aeschlimann]

Hey there,

There are a couple things noted here, so I will reply to each individually:

1. Users should be able to press "Enter" to select an option in the popover select interface.

The popover single selection interface uses radios, and radios are not typically activated using the "Enter" key. We are working on clarifying our documentation surrounding this, but ion-select is not designed to match the <select> behavior despite the similar names. Instead, we have opted to follow the radio keyboard behaviors for this component.

2. When no value is selected the first option is focused even if it is disabled This is a bug in Ionic. I will have a PR up shortly.

Thank you for your detailed reply.

What component would you suggest to use on a computer-first environment when you would normally choose a tag? In order to be efficient when using the keyboard, the ENTER key is quite important for us.

liamdebeasi commented 1 year ago

What component would you suggest to use on a computer-first environment when you would normally choose a tag? In order to be efficient when using the keyboard, the ENTER key is quite important for us.

I'd recommend using the <select> element in this case (or a similar component from another UI library). Ionic's components are optimized for mobile, so there are likely going to be some missing usability features on desktop.

ionitron-bot[bot] commented 11 months ago

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[liamdebeasi]

What component would you suggest to use on a computer-first environment when you would normally choose a tag? In order to be efficient when using the keyboard, the ENTER key is quite important for us.

I'd recommend using the <select> element in this case (or a similar component from another UI library). Ionic's components are optimized for mobile, so there are likely going to be some missing usability features on desktop.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.