fix(vue): cache attached view reference (#26694)

Resolves #26695

Author: sean-perkins

packages/vue/src/framework-delegate.ts

@@ -17,7 +17,7 @@ export const VueDelegate = (
   // TODO(FW-2969): types
   const attachViewToDom = (
     parentElement: HTMLElement,
-    component: any,
+    componentOrTagName: any | string,
     componentProps: any = {},
     classes?: string[]
   ) => {
@@ -28,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

@@ -66,6 +66,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'),
@@ -140,7 +148,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

@@ -53,15 +53,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: {
@@ -74,7 +87,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");
+  });
+});