fix(angular): popover arrow navigation with disabled items

[brandyscarney]

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:

<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:

<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
• 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.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 25, 2024 9:18pm