chore(): sync with main

CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/ionic-team/ionic-framework/compare/v6.5.1...v6.5.2) (2023-02-01)
+
+### Bug Fixes
+
+* **item:** inherit aria attributes before render ([#26546](https://github.com/ionic-team/ionic-framework/issues/26546)) ([95a3c69](https://github.com/ionic-team/ionic-framework/commit/95a3c69bbbe415cb5f14ac8e1faed287e91b4b40)), closes [#26538](https://github.com/ionic-team/ionic-framework/issues/26538)
+* **popover:** popover opens on chrome 109 ([#26672](https://github.com/ionic-team/ionic-framework/issues/26672)) ([69d89ea](https://github.com/ionic-team/ionic-framework/commit/69d89eae940ccd8b0cca379a961166c4592f34c7)), closes [#26643](https://github.com/ionic-team/ionic-framework/issues/26643)
+* **popover:** resolve import warning in stencil apps ([#26705](https://github.com/ionic-team/ionic-framework/issues/26705)) ([95f65a5](https://github.com/ionic-team/ionic-framework/commit/95f65a5a390eb600de8998c8be9dfd7c023d1eeb)), closes [#26704](https://github.com/ionic-team/ionic-framework/issues/26704)
+* **select:** setting options async updates rendered text ([#26667](https://github.com/ionic-team/ionic-framework/issues/26667)) ([a687457](https://github.com/ionic-team/ionic-framework/commit/a6874579361db548d961fdee83299d664dd6541b)), closes [#19324](https://github.com/ionic-team/ionic-framework/issues/19324)
+* **vue:** cache attached view reference ([#26694](https://github.com/ionic-team/ionic-framework/issues/26694)) ([7c00897](https://github.com/ionic-team/ionic-framework/commit/7c0089718afbbe3e19fecee4abbea00a6e618d95)), closes [#26695](https://github.com/ionic-team/ionic-framework/issues/26695)
+
 # [7.0.0-beta.0](https://github.com/ionic-team/ionic-framework/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
 
 

angular/CHANGELOG.md

@@ -3,8 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
+## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01)
-
 
 ### Bug Fixes
 
@@ -69,6 +68,12 @@ Angular:
 * **checkbox:** `ionChange` is no longer emitted when the `checked` property of `ion-checkbox` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the checkbox.
 * **accordion:** `ionChange` is no longer emitted when the `value` of `ion-accordion-group` is modified externally. `ionChange` is only emitted from user committed changes, such as clicking or tapping the accordion header.
 
+# [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
+
+### Bug Fixes
+
+* **popover:** popover opens on chrome 109 ([#26672](https://github.com/ionic-team/ionic/issues/26672)) ([69d89ea](https://github.com/ionic-team/ionic/commit/69d89eae940ccd8b0cca379a961166c4592f34c7)), closes [#26643](https://github.com/ionic-team/ionic/issues/26643)
+
 
 
 

angular/src/providers/angular-delegate.ts

@@ -30,9 +30,17 @@ export class AngularDelegate {
   create(
     resolverOrInjector: ComponentFactoryResolver,
     injector: Injector,
-    location?: ViewContainerRef
+    location?: ViewContainerRef,
+    elementReferenceKey?: string
   ): AngularFrameworkDelegate {
-    return new AngularFrameworkDelegate(resolverOrInjector, injector, location, this.appRef, this.zone);
+    return new AngularFrameworkDelegate(
+      resolverOrInjector,
+      injector,
+      location,
+      this.appRef,
+      this.zone,
+      elementReferenceKey
+    );
   }
 }
 
@@ -45,12 +53,29 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
     private injector: Injector,
     private location: ViewContainerRef | undefined,
     private appRef: ApplicationRef,
-    private zone: NgZone
+    private zone: NgZone,
+    private elementReferenceKey?: string
   ) {}
 
   attachViewToDom(container: any, component: any, params?: any, cssClasses?: string[]): Promise<any> {
     return this.zone.run(() => {
       return new Promise((resolve) => {
+        const componentProps = {
+          ...params,
+        };
+
+        /**
+         * Ionic Angular passes a reference to a modal
+         * or popover that can be accessed using a
+         * variable in the overlay component. If
+         * elementReferenceKey is defined, then we should
+         * pass a reference to the component using
+         * elementReferenceKey as the key.
+         */
+        if (this.elementReferenceKey !== undefined) {
+          componentProps[this.elementReferenceKey] = container;
+        }
+
         const el = attachView(
           this.zone,
           this.resolverOrInjector,
@@ -61,7 +86,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
           this.elEventsMap,
           container,
           component,
-          params,
+          componentProps,
           cssClasses
         );
         resolve(el);

angular/src/providers/modal-controller.ts

@@ -21,7 +21,12 @@ export class ModalController extends OverlayBaseController<ModalOptions, HTMLIon
   create(opts: ModalOptions): Promise<HTMLIonModalElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector),
+      delegate: this.angularDelegate.create(
+        this.resolver ?? this.environmentInjector,
+        this.injector,
+        undefined,
+        'modal'
+      ),
     });
   }
 }

angular/src/providers/popover-controller.ts

@@ -21,7 +21,12 @@ export class PopoverController extends OverlayBaseController<PopoverOptions, HTM
   create(opts: PopoverOptions): Promise<HTMLIonPopoverElement> {
     return super.create({
       ...opts,
-      delegate: this.angularDelegate.create(this.resolver ?? this.environmentInjector, this.injector),
+      delegate: this.angularDelegate.create(
+        this.resolver ?? this.environmentInjector,
+        this.injector,
+        undefined,
+        'popover'
+      ),
     });
   }
 }

core/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01)
+
+
+### Bug Fixes
+
+* **item:** inherit aria attributes before render ([#26546](https://github.com/ionic-team/ionic/issues/26546)) ([95a3c69](https://github.com/ionic-team/ionic/commit/95a3c69bbbe415cb5f14ac8e1faed287e91b4b40)), closes [#26538](https://github.com/ionic-team/ionic/issues/26538)
+* **popover:** popover opens on chrome 109 ([#26672](https://github.com/ionic-team/ionic/issues/26672)) ([69d89ea](https://github.com/ionic-team/ionic/commit/69d89eae940ccd8b0cca379a961166c4592f34c7)), closes [#26643](https://github.com/ionic-team/ionic/issues/26643)
+* **popover:** resolve import warning in stencil apps ([#26705](https://github.com/ionic-team/ionic/issues/26705)) ([95f65a5](https://github.com/ionic-team/ionic/commit/95f65a5a390eb600de8998c8be9dfd7c023d1eeb)), closes [#26704](https://github.com/ionic-team/ionic/issues/26704)
+* **select:** setting options async updates rendered text ([#26667](https://github.com/ionic-team/ionic/issues/26667)) ([a687457](https://github.com/ionic-team/ionic/commit/a6874579361db548d961fdee83299d664dd6541b)), closes [#19324](https://github.com/ionic-team/ionic/issues/19324)
+
+
 # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
 
 

core/src/components/item/item.tsx

@@ -209,6 +209,10 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     this.hasStartEl();
   }
 
+  componentWillLoad() {
+    this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);
+  }
+
   componentDidLoad() {
     const { el, counter, counterFormatter, fill, shape } = this;
     const hasHelperSlot = el.querySelector('[slot="helper"]') !== null;
@@ -256,7 +260,6 @@ export class Item implements ComponentInterface, AnchorInterface, ButtonInterfac
     }
 
     raf(() => {
-      this.inheritedAriaAttributes = inheritAttributes(el, ['aria-label']);
       this.setMultipleInputs();
       this.focusable = this.isFocusable();
     });

core/src/components/item/test/a11y/item.e2e.ts

@@ -12,4 +12,17 @@ test.describe('item: axe', () => {
       .analyze();
     expect(results.violations).toEqual([]);
   });
+
+  test('should reflect aria-label', async ({ page }) => {
+    await page.setContent(`
+      <ion-item id="item-1" aria-label="test"></ion-item>
+      <ion-item id="item-2" aria-label="test" button="true"></ion-item>
+    `);
+
+    const item1 = await page.locator('#item-1 .item-native');
+    const item2 = await page.locator('#item-2 .item-native');
+
+    expect(await item1.getAttribute('aria-label')).toEqual('test');
+    expect(await item2.getAttribute('aria-label')).toEqual('test');
+  });
 });

core/src/components/modal/modal.tsx

@@ -441,13 +441,8 @@ export class Modal implements ComponentInterface, OverlayInterface {
      */
     this.currentBreakpoint = this.initialBreakpoint;
 
-    const data = {
-      ...this.componentProps,
-      modal: this.el,
-    };
-
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], data, inline);
+    this.usersElement = await attachComponent(delegate, el, this.component, ['ion-page'], this.componentProps, inline);
     hasLazyBuild(el) && (await deepReady(this.usersElement));
 
     writeTask(() => this.el.classList.add('show-modal'));

core/src/components/popover/popover.tsx

@@ -1,11 +1,11 @@
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
-import { printIonWarning } from '@utils/logging';
 
 import { getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, ComponentProps, ComponentRef, FrameworkDelegate } from '../../interface';
 import { CoreDelegate, attachComponent, detachComponent } from '../../utils/framework-delegate';
 import { addEventListener, raf, hasLazyBuild } from '../../utils/helpers';
+import { printIonWarning } from '../../utils/logging';
 import { BACKDROP, dismiss, eventMethod, focusFirstDescendant, prepareOverlay, present } from '../../utils/overlays';
 import type { OverlayEventDetail } from '../../utils/overlays-interface';
 import { isPlatform } from '../../utils/platform';
@@ -446,13 +446,15 @@ export class Popover implements ComponentInterface, PopoverInterface {
 
     const { el } = this;
 
-    const data = {
-      ...this.componentProps,
-      popover: this.el,
-    };
-
     const { inline, delegate } = this.getDelegate(true);
-    this.usersElement = await attachComponent(delegate, el, this.component, ['popover-viewport'], data, inline);
+    this.usersElement = await attachComponent(
+      delegate,
+      el,
+      this.component,
+      ['popover-viewport'],
+      this.componentProps,
+      inline
+    );
     hasLazyBuild(el) && (await deepReady(this.usersElement));
 
     if (!this.keyboardEvents) {

docs/CHANGELOG.md

@@ -3,8 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/ionic-team/ionic-docs/compare/v6.5.1...v6.5.2) (2023-02-01)
+
+**Note:** Version bump only for package @ionic/docs
+
+
+
+
+
 # [7.0.0-beta.0](https://github.com/ionic-team/ionic-docs/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
 
+
 **Note:** Version bump only for package @ionic/docs
 
 

packages/angular-server/CHANGELOG.md

@@ -3,9 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01)
+
+**Note:** Version bump only for package @ionic/angular-server
+
 # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
 
 
+
+
 ### Features
 
 * **virtual-scroll:** remove virtual scroll component ([#25808](https://github.com/ionic-team/ionic/issues/25808)) ([1eb6fd0](https://github.com/ionic-team/ionic/commit/1eb6fd04d7f8c7ccd7dac08d085dc90d9f6283cc))

packages/react-router/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01)
+
+**Note:** Version bump only for package @ionic/react-router
+
+
+
+
 # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
 
 

packages/react/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01)
+
+**Note:** Version bump only for package @ionic/react
+
+
+
+
 # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
 
 
@@ -33,6 +40,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+
 ## [6.5.1](https://github.com/ionic-team/ionic/compare/v6.5.0...v6.5.1) (2023-01-25)
 
 

packages/vue-router/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01)
+
+**Note:** Version bump only for package @ionic/vue-router
+
+
+
+
 # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
 
 

packages/vue-router/package-lock.json

@@ -6775,9 +6775,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "2.4.1",
+      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -12164,9 +12164,9 @@
       }
     },
     "tslib": {
-      "version": "2.4.1",
+      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "tsutils": {
       "version": "3.21.0",

packages/vue/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+
+## [6.5.2](https://github.com/ionic-team/ionic/compare/v6.5.1...v6.5.2) (2023-02-01)
+
+
+### Bug Fixes
+
+* **item:** inherit aria attributes before render ([#26546](https://github.com/ionic-team/ionic/issues/26546)) ([95a3c69](https://github.com/ionic-team/ionic/commit/95a3c69bbbe415cb5f14ac8e1faed287e91b4b40)), closes [#26538](https://github.com/ionic-team/ionic/issues/26538)
+* **popover:** popover opens on chrome 109 ([#26672](https://github.com/ionic-team/ionic/issues/26672)) ([69d89ea](https://github.com/ionic-team/ionic/commit/69d89eae940ccd8b0cca379a961166c4592f34c7)), closes [#26643](https://github.com/ionic-team/ionic/issues/26643)
+* **vue:** cache attached view reference ([#26694](https://github.com/ionic-team/ionic/issues/26694)) ([7c00897](https://github.com/ionic-team/ionic/commit/7c0089718afbbe3e19fecee4abbea00a6e618d95)), closes [#26695](https://github.com/ionic-team/ionic/issues/26695)
+
+
+
+
 # [7.0.0-beta.0](https://github.com/ionic-team/ionic/compare/v6.5.1...v7.0.0-beta.0) (2023-01-25)
 
 

packages/vue/src/framework-delegate.ts

@@ -17,19 +17,10 @@ export const VueDelegate = (
   // TODO(FW-2969): types
   const attachViewToDom = (
     parentElement: HTMLElement,
-    component: any,
+    componentOrTagName: any | string,
     componentProps: any = {},
     classes?: string[]
   ) => {
-    /**
-     * Ionic Framework passes in modal and popover element
-     * refs as props, but if these are not defined
-     * on the Vue component instance as props, Vue will
-     * warn the user.
-     */
-    delete componentProps["modal"];
-    delete componentProps["popover"];
-
     const div = document.createElement("div");
     classes && div.classList.add(...classes);
     parentElement.appendChild(div);
@@ -37,10 +28,17 @@ export const VueDelegate = (
     const hostComponent = h(
       Teleport,
       { to: div },
-      h(component, { ...componentProps })
+      h(componentOrTagName, { ...componentProps })
     );
 
-    refMap.set(component, hostComponent);
+    /**
+     * Ionic Framework will use what is returned from `attachViewToDom`
+     * as the `component` argument in `removeViewFromDom`.
+     *
+     * We will store a reference to the div element and the host component,
+     * so we can later look-up and unmount the correct instance.
+     */
+    refMap.set(div, hostComponent);
 
     addFn(hostComponent);
 

packages/vue/test/base/src/router/index.ts

@@ -62,6 +62,14 @@ const routes: Array<RouteRecordRaw> = [
     path: '/navigation',
     component: () => import('@/views/Navigation.vue')
   },
+  {
+    path: '/components',
+    component: () => import('@/views/Components.vue'),
+  },
+  {
+    path: '/components/select',
+    component: () => import('@/views/Select.vue')
+  },
   {
     path: '/nested',
     component: () => import('@/views/RouterOutlet.vue'),
@@ -136,7 +144,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/Tab3Secondary.vue')
       }
     ]
-  }
+  },
 ]
 
 const router = createRouter({

packages/vue/test/base/src/views/Components.vue

@@ -0,0 +1,20 @@
+<template>
+  <ion-page>
+    <ion-content>
+      <ion-list>
+        <ion-item button router-link="/components/select">
+          <ion-label>Select</ion-label>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { IonPage, IonContent, IonList, IonItem, IonLabel } from "@ionic/vue";
+
+export default defineComponent({
+  components: { IonPage, IonContent, IonList, IonItem, IonLabel },
+});
+</script>

packages/vue/test/base/src/views/Home.vue

@@ -50,15 +50,28 @@
         <ion-item button router-link="/delayed-redirect" id="delayed-redirect">
           <ion-label>Delayed Redirect</ion-label>
         </ion-item>
+        <ion-item button router-link="/components">
+          <ion-label>Components</ion-label>
+        </ion-item>
       </ion-list>
-
     </ion-content>
   </ion-page>
 </template>
 
 <script lang="ts">
-import { IonButtons, IonBackButton, IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
+import {
-import { defineComponent } from 'vue';
+  IonButtons,
+  IonBackButton,
+  IonContent,
+  IonHeader,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
 
 export default defineComponent({
   components: {
@@ -71,7 +84,7 @@ export default defineComponent({
     IonList,
     IonPage,
     IonTitle,
-    IonToolbar
+    IonToolbar,
-  }
+  },
 });
 </script>

packages/vue/test/base/src/views/Select.vue

@@ -0,0 +1,52 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Select</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <ion-item>
+        <ion-label>Select Popover</ion-label>
+        <ion-select
+          id="select-popover"
+          interface="popover"
+          placeholder="Select fruit"
+        >
+          <ion-select-option value="apples">Apples</ion-select-option>
+          <ion-select-option value="oranges">Oranges</ion-select-option>
+          <ion-select-option value="bananas">Bananas</ion-select-option>
+        </ion-select>
+      </ion-item>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonPage,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonItem,
+  IonLabel,
+  IonSelect,
+  IonSelectOption,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  components: {
+    IonPage,
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonItem,
+    IonLabel,
+    IonSelect,
+    IonSelectOption,
+  },
+});
+</script>

packages/vue/test/base/tests/e2e/specs/select.cy.js

@@ -0,0 +1,10 @@
+describe("Components: Select", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:8080/components/select");
+  });
+
+  it("should open a popover overlay interface", () => {
+    cy.get("#select-popover").click();
+    cy.get("ion-popover").should("exist").should("be.visible");
+  });
+});