From c9fe73792535853ef4481d9f2eeeee21e9d55aed Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Fri, 27 Jan 2023 15:41:41 -0500
Subject: [PATCH 1/2] fix(vue): cache attached view reference

---
 packages/vue/src/framework-delegate.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/vue/src/framework-delegate.ts b/packages/vue/src/framework-delegate.ts
index 2908cff61ab..cad5c7e84cf 100644
--- a/packages/vue/src/framework-delegate.ts
+++ b/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[]
   ) => {
@@ -37,10 +37,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);
 

From 7cb0c8f62752513fc7aa72f3404ae70edd61c5bc Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Mon, 30 Jan 2023 15:32:56 -0500
Subject: [PATCH 2/2] test(vue): select opens a popover

---
 packages/vue/test/base/src/router/index.ts    | 10 +++-
 .../vue/test/base/src/views/Components.vue    | 20 +++++++
 packages/vue/test/base/src/views/Home.vue     | 23 ++++++--
 packages/vue/test/base/src/views/Select.vue   | 52 +++++++++++++++++++
 .../test/base/tests/e2e/specs/select.cy.js    | 10 ++++
 5 files changed, 109 insertions(+), 6 deletions(-)
 create mode 100644 packages/vue/test/base/src/views/Components.vue
 create mode 100644 packages/vue/test/base/src/views/Select.vue
 create mode 100644 packages/vue/test/base/tests/e2e/specs/select.cy.js

diff --git a/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts
index 1395b178ac3..d67ca47993f 100644
--- a/packages/vue/test/base/src/router/index.ts
+++ b/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({
diff --git a/packages/vue/test/base/src/views/Components.vue b/packages/vue/test/base/src/views/Components.vue
new file mode 100644
index 00000000000..de63bbf9905
--- /dev/null
+++ b/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>
diff --git a/packages/vue/test/base/src/views/Home.vue b/packages/vue/test/base/src/views/Home.vue
index cbd4155feab..2d0e6a875ae 100644
--- a/packages/vue/test/base/src/views/Home.vue
+++ b/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>
diff --git a/packages/vue/test/base/src/views/Select.vue b/packages/vue/test/base/src/views/Select.vue
new file mode 100644
index 00000000000..0f48fcc612b
--- /dev/null
+++ b/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>
diff --git a/packages/vue/test/base/tests/e2e/specs/select.cy.js b/packages/vue/test/base/tests/e2e/specs/select.cy.js
new file mode 100644
index 00000000000..de8b832e67b
--- /dev/null
+++ b/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");
+  });
+});