fix(angular): popover arrow navigation with disabled items

core/api.txt

@@ -783,7 +783,7 @@ ion-item,prop,button,boolean,false,false,false
 ion-item,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-item,prop,detail,boolean | undefined,undefined,false,false
 ion-item,prop,detailIcon,string,chevronForward,false,false
-ion-item,prop,disabled,boolean,false,false,false
+ion-item,prop,disabled,boolean,false,false,true
 ion-item,prop,download,string | undefined,undefined,false,false
 ion-item,prop,href,string | undefined,undefined,false,false
 ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false

core/src/components/item/item.tsx

@@ -64,7 +64,7 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
   /**
    * If `true`, the user cannot interact with the item.
    */
-  @Prop() disabled = false;
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * This attribute instructs browsers to download a URL instead of navigating to

packages/angular/test/base/e2e/src/lazy/popover.spec.ts

@@ -22,4 +22,14 @@ describe('Popovers: Inline', () => {
     cy.get('ion-list ion-item:nth-child(3)').should('have.text', 'C');
     cy.get('ion-list ion-item:nth-child(4)').should('have.text', 'D');
   });
+
+  it('should have an item with a disabled attribute', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
+
+    cy.wait(1500);
+
+    cy.get('ion-list ion-item:nth-child(3)').should('have.attr', 'disabled');
+  });
 });

packages/angular/test/base/src/app/lazy/home-page/home-page.component.html

@@ -57,5 +57,10 @@
         Accordions Test
       </ion-label>
     </ion-item>
+    <ion-item routerLink="/lazy/popover-inline">
+      <ion-label>
+        Popovers
+      </ion-label>
+    </ion-item>
   </ion-list>
 </ion-content>

packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.html

@@ -4,8 +4,8 @@
   <ng-template>
     <ion-content>
       <ion-list>
-        <ion-item *ngFor="let item of items">
-          <ion-label>{{ item }}</ion-label>
+        <ion-item *ngFor="let item of items" [button]="true" [disabled]="item.disabled">
+          <ion-label>{{ item.text }}</ion-label>
         </ion-item>
       </ion-list>
     </ion-content>

packages/angular/test/base/src/app/lazy/popover-inline/popover-inline.component.ts

@@ -13,13 +13,13 @@ import { IonPopover } from "@ionic/angular";
 })
 export class PopoverInlineComponent {
 
-  items: string[] = [];
+  items: {text: string, disabled?: boolean}[] = [];
 
   openPopover(popover: IonPopover) {
     popover.present();
 
     setTimeout(() => {
-      this.items = ['A', 'B', 'C', 'D'];
+      this.items = [{text: 'A'}, {text: 'B'}, {text: 'C', disabled: true}, {text: 'D'}];
     }, 1000);
   }