bug: ion-popover arrow navigation breaks on disabled element #29640
Assignees
Labels
type: bug
a confirmed bug report
Comments
2 tasks
github-merge-queue bot
pushed a commit
that referenced
this issue
Jun 26, 2024
Issue number: resolves #29640 --------- ## What is the current behavior? (Angular) If a list inside of a popover contains a disabled item and is included in the following way: ```html <ion-list> <ion-item [button]="true">Option 1</ion-item> <ion-item [button]="true" [disabled]="true">Option 2</ion-item> <ion-item [button]="true">Option 3</ion-item> </ion-list> ``` when you try to navigate using the arrow down keys, it will stop at the disabled item instead of continuing over it. Note that changing the item to the following will work: ```html <ion-item [button]="true" disabled="true">Option 2</ion-item> ``` ## What is the new behavior? Reflect the `disabled` property in the item so that when items are queried in the popover, the arrow down key skips over the disabled item. ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information This can be tested in the Angular test app by following the documentation here: https://github.com/ionic-team/ionic-framework/blob/main/docs/angular/testing.md Removing my fix in `core`, then running `npm run build` and re-syncing the test app should reproduce the problem.
|
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. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Prerequisites
Ionic Framework Version
v8.x
Current Behavior
if a popover with ion-items have one in the middle that is disabled, navigation with arrows, break.
https://stackblitz.com/edit/angular-b8jwzq?file=src%2Fapp%2Fexample.component.html
Expected Behavior
arrow navigation should skip disabled element and jump to next active element
Steps to Reproduce
Go to https://stackblitz.com/edit/angular-b8jwzq?file=src%2Fapp%2Fexample.component.html
open popover
tab until you reach the popover
use ARROWS to navigate in all elements
(TAB works)
Code Reproduction URL
https://stackblitz.com/edit/angular-b8jwzq?file=src%2Fapp%2Fexample.component.html
Ionic Info
I have ionic 6 but looking to have it solved in ionic 7 or 8 so we get it solved after we do our migration
Additional Information
No response
The text was updated successfully, but these errors were encountered: