chore(): sync with main

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 { defineComponent } from 'vue';
+import {
+  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");
+  });
+});