bug: ion-picker allows selection of disabled options between enabled options

[austinrzg]

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• v7.x
• Nightly

Current Behavior

When using an ion-picker with a list of options that begins with 1+ enabled, contains 1+ disabled options in the middle, then ends with 1+ enabled options, the selector doesn't correctly auto-select an enabled option. Further the selector allows the user to select a disabled option.

Expected Behavior

Users should not be able to select a disabled PickerColumnOption.

PickerColumn should auto-select a valid option if the user attempts to choose a disabled option.

Steps to Reproduce

1. Create a simple ion-picker with a set of options - recommend 7 options to easily see the issue.
2. Set the options as follows:

• 0: disabled = false
• 1: disabled = false
• 2: disabled = true
• 3: disabled = true
• 4: disabled = true
• 5: disabled = false
• 6: disabled = 6

3. Attempt to select a disabled option.

*Note, you may need to adjust the CSS for .picker-opt-disabled in order to see the disabled options more easily.

Code Reproduction URL

https://github.com/austinrzg/angular-fqvgd8

Ionic Info

Ionic:

Ionic CLI : 5.4.16

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v16.18.1
npm : 8.1.2
OS : Windows 10

Additional Information

No response

[averyjohnston]

Thank you for the issue, I'm able to replicate this. Dragging the picker column with the mouse allows you to select the disabled items. It seems the number of items or columns doesn't matter, as long as there is at least one enabled item on both sides of the disabled item(s).

When using items like this:

1. Enabled
2. Disabled
3. Enabled
4. Disabled

... item 2 is selectable, but not item 4.

I'm able to replicate it in core, meaning it likely happens in all frameworks. It also happens with both controller pickers, and the upcoming inline pickers feature.

It looks like the best workaround is to rearrange things to place all disabled items at the end of the column.

[liamdebeasi]

Thanks for the request. In Ionic 8 we are adding a new inline picker which resolves this issue. The work required to add this was completed in #28689, so I am going to close this.

[ionitron-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.