From 60d0db532643f7bd5c6a1066b0ed1418de02d5ee Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 28 Jun 2022 11:57:19 -0400
Subject: [PATCH 01/14] feat(modal, popover): add autoMountComponent property
 (#25537)

---
 angular/src/directives/overlays/modal.ts   |  2 ++
 angular/src/directives/overlays/popover.ts |  2 ++
 core/api.txt                               |  2 ++
 core/src/components.d.ts                   | 16 ++++++++++++++++
 core/src/components/modal/modal.tsx        | 13 +++++++++++++
 core/src/components/popover/popover.tsx    | 13 +++++++++++++
 packages/vue/src/components/Overlays.ts    |  4 ++--
 7 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/angular/src/directives/overlays/modal.ts b/angular/src/directives/overlays/modal.ts
index 10f1120906a..5ea13a9ac50 100644
--- a/angular/src/directives/overlays/modal.ts
+++ b/angular/src/directives/overlays/modal.ts
@@ -54,6 +54,7 @@ export declare interface IonModal extends Components.IonModal {
 @ProxyCmp({
   inputs: [
     'animated',
+    'autoMountComponent',
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
@@ -81,6 +82,7 @@ export declare interface IonModal extends Components.IonModal {
   template: `<div class="ion-page" *ngIf="isCmpOpen"><ng-container [ngTemplateOutlet]="template"></ng-container></div>`,
   inputs: [
     'animated',
+    'autoMountComponent',
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
diff --git a/angular/src/directives/overlays/popover.ts b/angular/src/directives/overlays/popover.ts
index 0bcf5f7e262..04fba8ad09b 100644
--- a/angular/src/directives/overlays/popover.ts
+++ b/angular/src/directives/overlays/popover.ts
@@ -51,6 +51,7 @@ export declare interface IonPopover extends Components.IonPopover {
     'alignment',
     'animated',
     'arrow',
+    'autoMountComponent',
     'backdropDismiss',
     'cssClass',
     'dismissOnSelect',
@@ -78,6 +79,7 @@ export declare interface IonPopover extends Components.IonPopover {
     'alignment',
     'animated',
     'arrow',
+    'autoMountComponent',
     'backdropDismiss',
     'cssClass',
     'dismissOnSelect',
diff --git a/core/api.txt b/core/api.txt
index e72c296273c..1f696278237 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -767,6 +767,7 @@ ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
 
 ion-modal,shadow
 ion-modal,prop,animated,boolean,true,false,false
+ion-modal,prop,autoMountComponent,boolean,false,false,false
 ion-modal,prop,backdropBreakpoint,number,0,false,false
 ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
@@ -887,6 +888,7 @@ ion-popover,shadow
 ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false
 ion-popover,prop,animated,boolean,true,false,false
 ion-popover,prop,arrow,boolean,true,false,false
+ion-popover,prop,autoMountComponent,boolean,false,false,false
 ion-popover,prop,backdropDismiss,boolean,true,false,false
 ion-popover,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
 ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index a2c0e8f9621..8469b1c0680 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1511,6 +1511,10 @@ export namespace Components {
           * If `true`, the modal will animate.
          */
         "animated": boolean;
+        /**
+          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "autoMountComponent": boolean;
         /**
           * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
          */
@@ -1890,6 +1894,10 @@ export namespace Components {
           * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
          */
         "arrow": boolean;
+        /**
+          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "autoMountComponent": boolean;
         /**
           * If `true`, the popover will be dismissed when the backdrop is clicked.
          */
@@ -5434,6 +5442,10 @@ declare namespace LocalJSX {
           * If `true`, the modal will animate.
          */
         "animated"?: boolean;
+        /**
+          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "autoMountComponent"?: boolean;
         /**
           * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
          */
@@ -5737,6 +5749,10 @@ declare namespace LocalJSX {
           * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
          */
         "arrow"?: boolean;
+        /**
+          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "autoMountComponent"?: boolean;
         /**
           * If `true`, the popover will be dismissed when the backdrop is clicked.
          */
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 766423a9485..44339857119 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -222,6 +222,19 @@ export class Modal implements ComponentInterface, OverlayInterface {
     this.configureTriggerInteraction();
   }
 
+  /**
+   * If `true`, the component passed into `ion-modal` will
+   * automatically be mounted when the modal is created. The
+   * component will remain mounted even when the modal is dismissed.
+   * However, the component will be destroyed when the modal is
+   * destroyed. This property is not reactive and should only be
+   * used when initially creating a modal.
+   *
+   * Note: This feature only applies to inline modals in JavaScript
+   * frameworks such as Angular, React, and Vue.
+   */
+  @Prop() autoMountComponent = false;
+
   /**
    * TODO (FW-937)
    * This needs to default to true in the next
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index 42374439112..3beaea73f10 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -253,6 +253,19 @@ export class Popover implements ComponentInterface, PopoverInterface {
     }
   }
 
+  /**
+   * If `true`, the component passed into `ion-popover` will
+   * automatically be mounted when the popover is created. The
+   * component will remain mounted even when the popover is dismissed.
+   * However, the component will be destroyed when the popover is
+   * destroyed. This property is not reactive and should only be
+   * used when initially creating a popover.
+   *
+   * Note: This feature only applies to inline popovers in JavaScript
+   * frameworks such as Angular, React, and Vue.
+   */
+  @Prop() autoMountComponent = false;
+
   /**
    * Emitted after the popover has presented.
    */
diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts
index 95f40dda760..a8a0e53eb38 100644
--- a/packages/vue/src/components/Overlays.ts
+++ b/packages/vue/src/components/Overlays.ts
@@ -29,7 +29,7 @@ export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('io
     
 export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController);
     
-export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'swipeToClose', 'trigger']);
+export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'autoMountComponent', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'swipeToClose', 'trigger']);
     
-export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
+export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'autoMountComponent', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
     

From 9a11077ae82ac26d0fcc616c2c5008ba7f84f1d6 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 28 Jun 2022 11:57:41 -0400
Subject: [PATCH 02/14] feat(vue): support autoMountComponent (#25538)

---
 .../vue/src/vue-component-lib/overlays.ts     |  2 +-
 .../src/components/PopoverContent.vue         |  8 +-
 packages/vue/test-app/src/router/index.ts     |  4 +
 .../test-app/src/views/OverlaysAutoMount.vue  | 81 +++++++++++++++++++
 .../tests/e2e/specs/overlays-auto-mount.js    | 52 ++++++++++++
 .../vue/test-app/tests/e2e/specs/overlays.js  |  4 +-
 6 files changed, 147 insertions(+), 4 deletions(-)
 create mode 100644 packages/vue/test-app/src/views/OverlaysAutoMount.vue
 create mode 100644 packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js

diff --git a/packages/vue/src/vue-component-lib/overlays.ts b/packages/vue/src/vue-component-lib/overlays.ts
index a59e72d7b5a..ec87ecf8895 100644
--- a/packages/vue/src/vue-component-lib/overlays.ts
+++ b/packages/vue/src/vue-component-lib/overlays.ts
@@ -162,7 +162,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
         return h(
           name,
           { ...restOfProps, ref: elementRef },
-          (isOpen.value) ? slots : undefined
+          (isOpen.value || restOfProps.autoMountComponent) ? slots : undefined
         )
       }
     });
diff --git a/packages/vue/test-app/src/components/PopoverContent.vue b/packages/vue/test-app/src/components/PopoverContent.vue
index 8a3717968d5..94534e57da6 100644
--- a/packages/vue/test-app/src/components/PopoverContent.vue
+++ b/packages/vue/test-app/src/components/PopoverContent.vue
@@ -1,11 +1,16 @@
 <template>
   <ion-content class="ion-padding">
-    {{ title }}
+    <ion-button id="dismiss" @click="dismiss">Dismiss</ion-button> <br />
+
+    <div id="title">
+      {{ title }}
+    </div>
   </ion-content>
 </template>
 
 <script lang="ts">
 import {
+  IonButton,
   IonContent,
   popoverController
 } from '@ionic/vue';
@@ -16,6 +21,7 @@ export default defineComponent({
     title: { type: String, default: 'Default Title' }
   },
   components: {
+    IonButton,
     IonContent
   },
   setup() {
diff --git a/packages/vue/test-app/src/router/index.ts b/packages/vue/test-app/src/router/index.ts
index c50ae9e73b0..04587eb1ad5 100644
--- a/packages/vue/test-app/src/router/index.ts
+++ b/packages/vue/test-app/src/router/index.ts
@@ -25,6 +25,10 @@ const routes: Array<RouteRecordRaw> = [
     path: '/overlays',
     component: () => import('@/views/Overlays.vue')
   },
+  {
+    path: '/overlays-auto-mount',
+    component: () => import('@/views/OverlaysAutoMount.vue')
+  },
   {
     path: '/inputs',
     component: () => import('@/views/Inputs.vue')
diff --git a/packages/vue/test-app/src/views/OverlaysAutoMount.vue b/packages/vue/test-app/src/views/OverlaysAutoMount.vue
new file mode 100644
index 00000000000..e4351355a34
--- /dev/null
+++ b/packages/vue/test-app/src/views/OverlaysAutoMount.vue
@@ -0,0 +1,81 @@
+<template>
+  <ion-page data-pageid="overlays-automount">
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons>
+          <ion-back-button></ion-back-button>
+        </ion-buttons>
+        <ion-title>Overlays - Auto Mount</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content class="ion-padding" :fullscreen="true">
+      <ion-button id="open-auto-mount-modal">Open Auto Mount Modal</ion-button>
+
+      <ion-button id="open-auto-mount-popover">Open Auto Mount Popover</ion-button>
+
+      <br /><br />
+
+      <ion-modal
+        id="auto-mount-modal"
+        :auto-mount-component="true"
+        trigger="open-auto-mount-modal"
+      >
+        <ModalContent :title="overlayProps.title"></ModalContent>
+      </ion-modal>
+
+      <ion-popover
+        id="auto-mount-popover"
+        :auto-mount-component="true"
+        trigger="open-auto-mount-popover"
+      >
+        <PopoverContent :title="overlayProps.title"></PopoverContent>
+      </ion-popover>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  IonModal,
+  IonPopover,
+} from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
+import ModalContent from '@/components/ModalContent.vue';
+import PopoverContent from '@/components/PopoverContent.vue';
+
+export default defineComponent({
+  components: {
+    ModalContent,
+    PopoverContent,
+    IonBackButton,
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    IonModal,
+    IonPopover,
+  },
+  setup() {
+    const overlayProps = {
+      title: 'Custom Title'
+    }
+
+    return {
+      overlayProps
+    }
+  }
+});
+</script>
diff --git a/packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js b/packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js
new file mode 100644
index 00000000000..f7de0aa5dad
--- /dev/null
+++ b/packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js
@@ -0,0 +1,52 @@
+describe('overlays - autoMountComponent', () => {
+  beforeEach(() => {
+    cy.viewport(1000, 900);
+    cy.visit('http://localhost:8080/overlays-auto-mount')
+  })
+  describe('modal', () => {
+    it('should not mount component if false', () => {
+      cy.get('ion-modal#default-modal ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.get('ion-modal#auto-mount-modal ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.get('#open-auto-mount-modal').click();
+
+      cy.get('ion-modal#auto-mount-modal ion-content').should('exist');
+
+      cy.get('ion-modal#auto-mount-modal #dismiss').click();
+
+      cy.get('ion-modal#auto-mount-modal')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-modal#auto-mount-modal ion-content').should('exist');
+    });
+  })
+  describe('popover', () => {
+    it('should not mount component if false', () => {
+      cy.get('ion-popover#default-popover ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.get('ion-popover#auto-mount-popover ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.get('#open-auto-mount-popover').click();
+
+      cy.get('ion-popover#auto-mount-popover ion-content').should('exist');
+
+      cy.get('ion-popover#auto-mount-popover #dismiss').click();
+
+      cy.get('ion-popover#auto-mount-popover')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-popover#auto-mount-popover ion-content').should('exist');
+    });
+  })
+})
diff --git a/packages/vue/test-app/tests/e2e/specs/overlays.js b/packages/vue/test-app/tests/e2e/specs/overlays.js
index 5026fd244a6..fcb0360d3b0 100644
--- a/packages/vue/test-app/tests/e2e/specs/overlays.js
+++ b/packages/vue/test-app/tests/e2e/specs/overlays.js
@@ -134,7 +134,7 @@ describe('Overlays', () => {
     cy.get('ion-button#present-overlay').click();
     cy.get('ion-popover.ion-popover-controller').should('exist');
 
-    cy.get('ion-popover.ion-popover-controller ion-content').should('have.text', 'Custom Title');
+    cy.get('ion-popover.ion-popover-controller ion-content #title').should('have.text', 'Custom Title');
   });
 
   it('should pass props to popover via component', () => {
@@ -144,7 +144,7 @@ describe('Overlays', () => {
     cy.get('ion-button#present-overlay').click();
     cy.get('ion-popover').should('exist');
 
-    cy.get('ion-popover.popover-inline ion-content').should('have.text', 'Custom Title');
+    cy.get('ion-popover.popover-inline ion-content #title').should('have.text', 'Custom Title');
   });
 
   it('should only open one instance at a time when props change quickly on component', () => {

From f23e835ca8a39111850fb4df09b41284bd4ebe1b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 28 Jun 2022 11:57:55 -0400
Subject: [PATCH 03/14] feat(react): support autoMountComponent (#25539)

---
 .../createInlineOverlayComponent.tsx          |  3 +-
 .../overlay-components/AutoMount.spec.ts      | 60 +++++++++++++++++++
 packages/react/test-app/src/App.tsx           |  2 +
 packages/react/test-app/src/pages/Main.tsx    |  5 ++
 .../overlay-components/AutoMountComponent.tsx | 38 ++++++++++++
 5 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts
 create mode 100644 packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx

diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx
index 783ba5b4950..fda0a11e92f 100644
--- a/packages/react/src/components/createInlineOverlayComponent.tsx
+++ b/packages/react/src/components/createInlineOverlayComponent.tsx
@@ -21,6 +21,7 @@ interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<Elem
   onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
   onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
   onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
+  autoMountComponent?: boolean;
 }
 
 export const createInlineOverlayComponent = <PropType, ElementType>(
@@ -128,7 +129,7 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
        * so conditionally render the component
        * based on the isOpen state.
        */
-      return createElement(tagName, newProps, (this.state.isOpen) ?
+      return createElement(tagName, newProps, (this.state.isOpen || this.props.autoMountComponent) ?
         createElement('div', {
           id: 'ion-react-wrapper',
           ref: this.wrapperRef,
diff --git a/packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts b/packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts
new file mode 100644
index 00000000000..7acf1b4cd04
--- /dev/null
+++ b/packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts
@@ -0,0 +1,60 @@
+describe('autoMountComponent', () => {
+  describe('modal', () => {
+    it('should not mount component if false', () => {
+      cy.visit('/overlay-components/modal');
+
+      cy.get('ion-modal ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.visit('/overlay-auto-mount');
+
+      cy.get('ion-modal ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.visit('/overlay-auto-mount');
+
+      cy.get('#open-modal').click();
+
+      cy.get('ion-modal ion-content').should('exist');
+
+      cy.get('ion-modal ion-button').click();
+
+      cy.get('ion-modal')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-modal ion-content').should('exist');
+    });
+  })
+  describe('popover', () => {
+    it('should not mount component if false', () => {
+      cy.visit('/overlay-components/popover');
+
+      cy.get('ion-popover ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.visit('/overlay-auto-mount');
+
+      cy.get('ion-popover ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.visit('/overlay-auto-mount');
+
+      cy.get('#open-popover').click();
+
+      cy.get('ion-popover ion-content').should('exist');
+
+      cy.get('ion-popover ion-button').click();
+
+      cy.get('ion-popover')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-popover ion-content').should('exist');
+    });
+  })
+});
diff --git a/packages/react/test-app/src/App.tsx b/packages/react/test-app/src/App.tsx
index 11cb79fba13..7ba01df9e4d 100644
--- a/packages/react/test-app/src/App.tsx
+++ b/packages/react/test-app/src/App.tsx
@@ -24,6 +24,7 @@ import './theme/variables.css';
 import Main from './pages/Main';
 import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
 import OverlayComponents from './pages/overlay-components/OverlayComponents';
+import AutoMountComponent from './pages/overlay-components/AutoMountComponent';
 import Tabs from './pages/Tabs';
 
 setupIonicReact();
@@ -35,6 +36,7 @@ const App: React.FC = () => (
         <Route path="/" component={Main} />
         <Route path="/overlay-hooks" component={OverlayHooks} />
         <Route path="/overlay-components" component={OverlayComponents} />
+        <Route path="/overlay-auto-mount" component={AutoMountComponent} />
         <Route path="/tabs" component={Tabs} />
       </IonRouterOutlet>
     </IonReactRouter>
diff --git a/packages/react/test-app/src/pages/Main.tsx b/packages/react/test-app/src/pages/Main.tsx
index 944ac25419c..f9a3328e771 100644
--- a/packages/react/test-app/src/pages/Main.tsx
+++ b/packages/react/test-app/src/pages/Main.tsx
@@ -31,6 +31,11 @@ const Main: React.FC<MainProps> = () => {
             <IonLabel>Overlay Components</IonLabel>
           </IonItem>
         </IonList>
+        <IonList>
+          <IonItem routerLink="/overlay-auto-mount">
+            <IonLabel>Auto Mount Overlay Components</IonLabel>
+          </IonItem>
+        </IonList>
         <IonList>
           <IonItem routerLink="/tabs">
             <IonLabel>Tabs</IonLabel>
diff --git a/packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx b/packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx
new file mode 100644
index 00000000000..af1be4b5a13
--- /dev/null
+++ b/packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx
@@ -0,0 +1,38 @@
+import React, { useState } from 'react';
+import {
+  IonButton,
+  IonContent,
+  IonPage,
+  IonModal,
+  IonPopover,
+} from '@ionic/react';
+
+const AutoMountComponent: React.FC = () => {
+  const [showModal, setShowModal] = useState(false);
+  const [showPopover, setShowPopover] = useState(false);
+
+  return (
+    <IonPage>
+      <IonContent fullscreen>
+        <IonButton id="open-modal" onClick={() => setShowModal(true)}>Open Modal</IonButton>
+        <IonButton id="open-popover" onClick={() => setShowPopover(true)}>Open Popover</IonButton>
+
+        <IonModal autoMountComponent={true} id="default-modal" isOpen={showModal} onDidDismiss={() => setShowPopover(false)}>
+          <IonContent>
+            <IonButton onClick={() => setShowModal(false)}>Dismiss</IonButton>
+            Modal Content
+          </IonContent>
+        </IonModal>
+
+        <IonPopover autoMountComponent={true} isOpen={showPopover} onDidDismiss={() => setShowPopover(false)}>
+          <IonContent>
+            <IonButton onClick={() => setShowPopover(false)}>Dismiss</IonButton>
+            Popover Content
+          </IonContent>
+        </IonPopover>
+      </IonContent>
+    </IonPage>
+  );
+};
+
+export default AutoMountComponent;

From a6480a3d8b65e67aa2573d3bcb8411ec48a364cd Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Tue, 28 Jun 2022 11:58:12 -0400
Subject: [PATCH 04/14] feat(angular): support autoMountComponent (#25541)

---
 angular/src/directives/overlays/modal.ts      |  4 +-
 angular/src/directives/overlays/popover.ts    |  2 +-
 .../e2e/src/overlay-auto-mount.spec.ts        | 60 +++++++++++++++++++
 angular/test/test-app/e2e/src/popover.spec.ts |  7 +++
 .../test-app/src/app/app-routing.module.ts    |  1 +
 .../src/app/overlay-auto-mount/index.ts       |  2 +
 .../overlay-auto-mount-routing.module.ts      | 16 +++++
 .../overlay-auto-mount.component.html         | 22 +++++++
 .../overlay-auto-mount.component.ts           | 13 ++++
 .../overlay-auto-mount.module.ts              | 12 ++++
 .../popover-inline.component.html             |  4 +-
 .../popover-inline.component.ts               |  8 ++-
 12 files changed, 145 insertions(+), 6 deletions(-)
 create mode 100644 angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts
 create mode 100644 angular/test/test-app/src/app/overlay-auto-mount/index.ts
 create mode 100644 angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts
 create mode 100644 angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html
 create mode 100644 angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts
 create mode 100644 angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts

diff --git a/angular/src/directives/overlays/modal.ts b/angular/src/directives/overlays/modal.ts
index 5ea13a9ac50..d2424742083 100644
--- a/angular/src/directives/overlays/modal.ts
+++ b/angular/src/directives/overlays/modal.ts
@@ -79,7 +79,9 @@ export declare interface IonModal extends Components.IonModal {
 @Component({
   selector: 'ion-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="ion-page" *ngIf="isCmpOpen"><ng-container [ngTemplateOutlet]="template"></ng-container></div>`,
+  template: `<div class="ion-page" *ngIf="isCmpOpen || autoMountComponent">
+    <ng-container [ngTemplateOutlet]="template"></ng-container>
+  </div>`,
   inputs: [
     'animated',
     'autoMountComponent',
diff --git a/angular/src/directives/overlays/popover.ts b/angular/src/directives/overlays/popover.ts
index 04fba8ad09b..71e976cdee3 100644
--- a/angular/src/directives/overlays/popover.ts
+++ b/angular/src/directives/overlays/popover.ts
@@ -74,7 +74,7 @@ export declare interface IonPopover extends Components.IonPopover {
 @Component({
   selector: 'ion-popover',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen"></ng-container>`,
+  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen || autoMountComponent"></ng-container>`,
   inputs: [
     'alignment',
     'animated',
diff --git a/angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts b/angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts
new file mode 100644
index 00000000000..4559c9a3811
--- /dev/null
+++ b/angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts
@@ -0,0 +1,60 @@
+describe('overlays - autoMountComponent', () => {
+  describe('modal', () => {
+    it('should not mount component if false', () => {
+      cy.visit('/modal-inline');
+
+      cy.get('ion-modal ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.visit('/overlay-auto-mount');
+
+      cy.get('ion-modal ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.visit('/overlay-auto-mount');
+
+      cy.get('#open-modal').click();
+
+      cy.get('ion-modal ion-content').should('exist');
+
+      cy.get('ion-modal ion-button').click();
+
+      cy.get('ion-modal')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-modal ion-content').should('exist');
+    });
+  })
+  describe('popover', () => {
+    it('should not mount component if false', () => {
+      cy.visit('/popover-inline');
+
+      cy.get('ion-popover ion-content').should('not.exist');
+    });
+
+    it('should mount component if true', () => {
+      cy.visit('/overlay-auto-mount');
+
+      cy.get('ion-popover ion-content').should('exist');
+    });
+
+    it('should keep component mounted after dismissing if true', () => {
+      cy.visit('/overlay-auto-mount');
+
+      cy.get('#open-popover').click();
+
+      cy.get('ion-popover ion-content').should('exist');
+
+      cy.get('ion-popover ion-button').click();
+
+      cy.get('ion-popover')
+        .should('not.be.visible')
+        .should('have.class', 'overlay-hidden');
+
+      cy.get('ion-popover ion-content').should('exist');
+    });
+  });
+});
diff --git a/angular/test/test-app/e2e/src/popover.spec.ts b/angular/test/test-app/e2e/src/popover.spec.ts
index abf1c06fa10..17f8fe64455 100644
--- a/angular/test/test-app/e2e/src/popover.spec.ts
+++ b/angular/test/test-app/e2e/src/popover.spec.ts
@@ -4,10 +4,17 @@ describe('Popovers: Inline', () => {
   });
 
   it('should initially have no items', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
     cy.get('ion-list ion-item').should('not.exist');
   });
 
   it('should have items after 1500ms', () => {
+    cy.get('ion-button').click();
+
+    cy.get('ion-popover').should('be.visible');
+
     cy.wait(1500);
 
     cy.get('ion-list ion-item:nth-child(1)').should('have.text', 'A');
diff --git a/angular/test/test-app/src/app/app-routing.module.ts b/angular/test/test-app/src/app/app-routing.module.ts
index be5ad94bb54..c32274881f7 100644
--- a/angular/test/test-app/src/app/app-routing.module.ts
+++ b/angular/test/test-app/src/app/app-routing.module.ts
@@ -31,6 +31,7 @@ const routes: Routes = [
   { path: 'modals', component: ModalComponent },
   { path: 'modal-inline', loadChildren: () => import('./modal-inline').then(m => m.ModalInlineModule) },
   { path: 'view-child', component: ViewChildComponent },
+  { path: 'overlay-auto-mount', loadChildren: () => import('./overlay-auto-mount').then(m => m.OverlayAutoMountModule) },
   { path: 'popover-inline', loadChildren: () => import('./popover-inline').then(m => m.PopoverInlineModule) },
   { path: 'providers', component: ProvidersComponent },
   { path: 'router-link', component: RouterLinkComponent },
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/index.ts b/angular/test/test-app/src/app/overlay-auto-mount/index.ts
new file mode 100644
index 00000000000..652113fa738
--- /dev/null
+++ b/angular/test/test-app/src/app/overlay-auto-mount/index.ts
@@ -0,0 +1,2 @@
+export * from './overlay-auto-mount.component';
+export * from './overlay-auto-mount.module';
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts
new file mode 100644
index 00000000000..6e5f30f3e9c
--- /dev/null
+++ b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { OverlayAutoMountComponent } from ".";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: '',
+        component: OverlayAutoMountComponent
+      }
+    ])
+  ],
+  exports: [RouterModule]
+})
+export class OverlayAutoMountRoutingModule { }
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html
new file mode 100644
index 00000000000..6d923b63f3a
--- /dev/null
+++ b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html
@@ -0,0 +1,22 @@
+<ion-content>
+  <ion-button id="open-modal" (click)="modal.present()">Open Modal</ion-button>
+  <ion-button id="open-popover" (click)="popover.present()">Open Popover</ion-button>
+
+  <ion-modal [autoMountComponent]="true" #modal>
+    <ng-template>
+      <ion-content>
+        <ion-button (click)="modal.dismiss()">Dismiss</ion-button>
+        Modal Content
+      </ion-content>
+    </ng-template>
+  </ion-modal>
+
+  <ion-popover [autoMountComponent]="true" #popover>
+    <ng-template>
+      <ion-content>
+        <ion-button (click)="popover.dismiss()">Dismiss</ion-button>
+        Popover Content
+      </ion-content>
+    </ng-template>
+  </ion-popover>
+</ion-content>
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts
new file mode 100644
index 00000000000..260772edf40
--- /dev/null
+++ b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts
@@ -0,0 +1,13 @@
+import { Component } from "@angular/core";
+
+/**
+ * Validates that inline modals correctly mount
+ * inner components when autoMountComponent is
+ * enabled.
+ */
+@Component({
+  selector: 'app-overlay-auto-mount',
+  templateUrl: 'overlay-auto-mount.component.html'
+})
+export class OverlayAutoMountComponent {
+}
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts
new file mode 100644
index 00000000000..f589875522e
--- /dev/null
+++ b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { IonicModule } from "@ionic/angular";
+import { OverlayAutoMountRoutingModule } from "./overlay-auto-mount-routing.module";
+import { OverlayAutoMountComponent } from "./overlay-auto-mount.component";
+
+@NgModule({
+  imports: [CommonModule, IonicModule, OverlayAutoMountRoutingModule],
+  declarations: [OverlayAutoMountComponent],
+  exports: [OverlayAutoMountComponent]
+})
+export class OverlayAutoMountModule { }
diff --git a/angular/test/test-app/src/app/popover-inline/popover-inline.component.html b/angular/test/test-app/src/app/popover-inline/popover-inline.component.html
index 1de4bc20aff..f4f311646cd 100644
--- a/angular/test/test-app/src/app/popover-inline/popover-inline.component.html
+++ b/angular/test/test-app/src/app/popover-inline/popover-inline.component.html
@@ -1,4 +1,6 @@
-<ion-popover [isOpen]="true">
+<ion-button (click)="openPopover(popover)">Open Popover</ion-button>
+
+<ion-popover #popover>
   <ng-template>
     <ion-content>
       <ion-list>
diff --git a/angular/test/test-app/src/app/popover-inline/popover-inline.component.ts b/angular/test/test-app/src/app/popover-inline/popover-inline.component.ts
index d162795795a..36e472900ca 100644
--- a/angular/test/test-app/src/app/popover-inline/popover-inline.component.ts
+++ b/angular/test/test-app/src/app/popover-inline/popover-inline.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component } from "@angular/core";
+import { Component } from "@angular/core";
 
 /**
  * Validates that inline popovers will correctly display
@@ -9,11 +9,13 @@ import { AfterViewInit, Component } from "@angular/core";
   selector: 'app-popover-inline',
   templateUrl: 'popover-inline.component.html'
 })
-export class PopoverInlineComponent implements AfterViewInit {
+export class PopoverInlineComponent {
 
   items: string[] = [];
 
-  ngAfterViewInit(): void {
+  openPopover(popover: HTMLIonPopoverElement) {
+    popover.present();
+
     setTimeout(() => {
       this.items = ['A', 'B', 'C', 'D'];
     }, 1000);

From f5504a9465704a4d4636bc596ae6a124f3fa6ddf Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 29 Jun 2022 11:22:40 -0400
Subject: [PATCH 05/14] chore(): rename to keepContentsMounted

---
 angular/src/directives/overlays/modal.ts                  | 6 +++---
 angular/src/directives/overlays/popover.ts                | 6 +++---
 angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts  | 2 +-
 .../overlay-auto-mount-routing.module.ts                  | 4 ++--
 .../overlay-auto-mount/overlay-auto-mount.component.html  | 4 ++--
 .../overlay-auto-mount/overlay-auto-mount.component.ts    | 4 ++--
 .../app/overlay-auto-mount/overlay-auto-mount.module.ts   | 6 +++---
 core/api.txt                                              | 4 ++--
 core/src/components.d.ts                                  | 8 ++++----
 core/src/components/modal/modal.tsx                       | 2 +-
 core/src/components/popover/popover.tsx                   | 2 +-
 .../react/src/components/createInlineOverlayComponent.tsx | 4 ++--
 .../integration/overlay-components/AutoMount.spec.ts      | 2 +-
 packages/react/test-app/src/App.tsx                       | 4 ++--
 .../src/pages/overlay-components/AutoMountComponent.tsx   | 8 ++++----
 packages/vue/src/components/Overlays.ts                   | 4 ++--
 packages/vue/src/vue-component-lib/overlays.ts            | 2 +-
 .../vue/test-app/tests/e2e/specs/overlays-auto-mount.js   | 2 +-
 18 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/angular/src/directives/overlays/modal.ts b/angular/src/directives/overlays/modal.ts
index d2424742083..5db8c6749df 100644
--- a/angular/src/directives/overlays/modal.ts
+++ b/angular/src/directives/overlays/modal.ts
@@ -54,7 +54,7 @@ export declare interface IonModal extends Components.IonModal {
 @ProxyCmp({
   inputs: [
     'animated',
-    'autoMountComponent',
+    'keepContentsMounted',
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
@@ -79,12 +79,12 @@ export declare interface IonModal extends Components.IonModal {
 @Component({
   selector: 'ion-modal',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div class="ion-page" *ngIf="isCmpOpen || autoMountComponent">
+  template: `<div class="ion-page" *ngIf="isCmpOpen || keepContentsMounted">
     <ng-container [ngTemplateOutlet]="template"></ng-container>
   </div>`,
   inputs: [
     'animated',
-    'autoMountComponent',
+    'keepContentsMounted',
     'backdropBreakpoint',
     'backdropDismiss',
     'breakpoints',
diff --git a/angular/src/directives/overlays/popover.ts b/angular/src/directives/overlays/popover.ts
index 71e976cdee3..aedbb97f9c8 100644
--- a/angular/src/directives/overlays/popover.ts
+++ b/angular/src/directives/overlays/popover.ts
@@ -51,7 +51,7 @@ export declare interface IonPopover extends Components.IonPopover {
     'alignment',
     'animated',
     'arrow',
-    'autoMountComponent',
+    'keepContentsMounted',
     'backdropDismiss',
     'cssClass',
     'dismissOnSelect',
@@ -74,12 +74,12 @@ export declare interface IonPopover extends Components.IonPopover {
 @Component({
   selector: 'ion-popover',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen || autoMountComponent"></ng-container>`,
+  template: `<ng-container [ngTemplateOutlet]="template" *ngIf="isCmpOpen || keepContentsMounted"></ng-container>`,
   inputs: [
     'alignment',
     'animated',
     'arrow',
-    'autoMountComponent',
+    'keepContentsMounted',
     'backdropDismiss',
     'cssClass',
     'dismissOnSelect',
diff --git a/angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts b/angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts
index 4559c9a3811..c49fdad8010 100644
--- a/angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts
+++ b/angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts
@@ -1,4 +1,4 @@
-describe('overlays - autoMountComponent', () => {
+describe('overlays - keepContentsMounted', () => {
   describe('modal', () => {
     it('should not mount component if false', () => {
       cy.visit('/modal-inline');
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts
index 6e5f30f3e9c..10354fc47ac 100644
--- a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts
+++ b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts
@@ -1,13 +1,13 @@
 import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { OverlayAutoMountComponent } from ".";
+import { OverlaykeepContentsMounted } from ".";
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: OverlayAutoMountComponent
+        component: OverlaykeepContentsMounted
       }
     ])
   ],
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html
index 6d923b63f3a..8311ecd5a72 100644
--- a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html
+++ b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html
@@ -2,7 +2,7 @@
   <ion-button id="open-modal" (click)="modal.present()">Open Modal</ion-button>
   <ion-button id="open-popover" (click)="popover.present()">Open Popover</ion-button>
 
-  <ion-modal [autoMountComponent]="true" #modal>
+  <ion-modal [keepContentsMounted]="true" #modal>
     <ng-template>
       <ion-content>
         <ion-button (click)="modal.dismiss()">Dismiss</ion-button>
@@ -11,7 +11,7 @@
     </ng-template>
   </ion-modal>
 
-  <ion-popover [autoMountComponent]="true" #popover>
+  <ion-popover [keepContentsMounted]="true" #popover>
     <ng-template>
       <ion-content>
         <ion-button (click)="popover.dismiss()">Dismiss</ion-button>
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts
index 260772edf40..737cf2fafcd 100644
--- a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts
+++ b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts
@@ -2,12 +2,12 @@ import { Component } from "@angular/core";
 
 /**
  * Validates that inline modals correctly mount
- * inner components when autoMountComponent is
+ * inner components when keepContentsMounted is
  * enabled.
  */
 @Component({
   selector: 'app-overlay-auto-mount',
   templateUrl: 'overlay-auto-mount.component.html'
 })
-export class OverlayAutoMountComponent {
+export class OverlaykeepContentsMounted {
 }
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts
index f589875522e..dc06fd04066 100644
--- a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts
+++ b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts
@@ -2,11 +2,11 @@ import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 import { IonicModule } from "@ionic/angular";
 import { OverlayAutoMountRoutingModule } from "./overlay-auto-mount-routing.module";
-import { OverlayAutoMountComponent } from "./overlay-auto-mount.component";
+import { OverlaykeepContentsMounted } from "./overlay-auto-mount.component";
 
 @NgModule({
   imports: [CommonModule, IonicModule, OverlayAutoMountRoutingModule],
-  declarations: [OverlayAutoMountComponent],
-  exports: [OverlayAutoMountComponent]
+  declarations: [OverlaykeepContentsMounted],
+  exports: [OverlaykeepContentsMounted]
 })
 export class OverlayAutoMountModule { }
diff --git a/core/api.txt b/core/api.txt
index 1f696278237..6b7f6f2026f 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -767,7 +767,7 @@ ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
 
 ion-modal,shadow
 ion-modal,prop,animated,boolean,true,false,false
-ion-modal,prop,autoMountComponent,boolean,false,false,false
+ion-modal,prop,keepContentsMounted,boolean,false,false,false
 ion-modal,prop,backdropBreakpoint,number,0,false,false
 ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
@@ -888,7 +888,7 @@ ion-popover,shadow
 ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false
 ion-popover,prop,animated,boolean,true,false,false
 ion-popover,prop,arrow,boolean,true,false,false
-ion-popover,prop,autoMountComponent,boolean,false,false,false
+ion-popover,prop,keepContentsMounted,boolean,false,false,false
 ion-popover,prop,backdropDismiss,boolean,true,false,false
 ion-popover,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
 ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index 8469b1c0680..cb7f66bef10 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1514,7 +1514,7 @@ export namespace Components {
         /**
           * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
          */
-        "autoMountComponent": boolean;
+        "keepContentsMounted": boolean;
         /**
           * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
          */
@@ -1897,7 +1897,7 @@ export namespace Components {
         /**
           * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
          */
-        "autoMountComponent": boolean;
+        "keepContentsMounted": boolean;
         /**
           * If `true`, the popover will be dismissed when the backdrop is clicked.
          */
@@ -5445,7 +5445,7 @@ declare namespace LocalJSX {
         /**
           * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
          */
-        "autoMountComponent"?: boolean;
+        "keepContentsMounted"?: boolean;
         /**
           * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
          */
@@ -5752,7 +5752,7 @@ declare namespace LocalJSX {
         /**
           * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
          */
-        "autoMountComponent"?: boolean;
+        "keepContentsMounted"?: boolean;
         /**
           * If `true`, the popover will be dismissed when the backdrop is clicked.
          */
diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx
index 44339857119..873a4148188 100644
--- a/core/src/components/modal/modal.tsx
+++ b/core/src/components/modal/modal.tsx
@@ -233,7 +233,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
    * Note: This feature only applies to inline modals in JavaScript
    * frameworks such as Angular, React, and Vue.
    */
-  @Prop() autoMountComponent = false;
+  @Prop() keepContentsMounted = false;
 
   /**
    * TODO (FW-937)
diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx
index 3beaea73f10..e9d6bacfc96 100644
--- a/core/src/components/popover/popover.tsx
+++ b/core/src/components/popover/popover.tsx
@@ -264,7 +264,7 @@ export class Popover implements ComponentInterface, PopoverInterface {
    * Note: This feature only applies to inline popovers in JavaScript
    * frameworks such as Angular, React, and Vue.
    */
-  @Prop() autoMountComponent = false;
+  @Prop() keepContentsMounted = false;
 
   /**
    * Emitted after the popover has presented.
diff --git a/packages/react/src/components/createInlineOverlayComponent.tsx b/packages/react/src/components/createInlineOverlayComponent.tsx
index fda0a11e92f..2851a371b8f 100644
--- a/packages/react/src/components/createInlineOverlayComponent.tsx
+++ b/packages/react/src/components/createInlineOverlayComponent.tsx
@@ -21,7 +21,7 @@ interface IonicReactInternalProps<ElementType> extends React.HTMLAttributes<Elem
   onDidPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
   onWillDismiss?: (event: CustomEvent<OverlayEventDetail>) => void;
   onWillPresent?: (event: CustomEvent<OverlayEventDetail>) => void;
-  autoMountComponent?: boolean;
+  keepContentsMounted?: boolean;
 }
 
 export const createInlineOverlayComponent = <PropType, ElementType>(
@@ -129,7 +129,7 @@ export const createInlineOverlayComponent = <PropType, ElementType>(
        * so conditionally render the component
        * based on the isOpen state.
        */
-      return createElement(tagName, newProps, (this.state.isOpen || this.props.autoMountComponent) ?
+      return createElement(tagName, newProps, (this.state.isOpen || this.props.keepContentsMounted) ?
         createElement('div', {
           id: 'ion-react-wrapper',
           ref: this.wrapperRef,
diff --git a/packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts b/packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts
index 7acf1b4cd04..f7f0491fc11 100644
--- a/packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts
+++ b/packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts
@@ -1,4 +1,4 @@
-describe('autoMountComponent', () => {
+describe('keepContentsMounted', () => {
   describe('modal', () => {
     it('should not mount component if false', () => {
       cy.visit('/overlay-components/modal');
diff --git a/packages/react/test-app/src/App.tsx b/packages/react/test-app/src/App.tsx
index 7ba01df9e4d..9e85c3d8a60 100644
--- a/packages/react/test-app/src/App.tsx
+++ b/packages/react/test-app/src/App.tsx
@@ -24,7 +24,7 @@ import './theme/variables.css';
 import Main from './pages/Main';
 import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
 import OverlayComponents from './pages/overlay-components/OverlayComponents';
-import AutoMountComponent from './pages/overlay-components/AutoMountComponent';
+import keepContentsMounted from './pages/overlay-components/keepContentsMounted';
 import Tabs from './pages/Tabs';
 
 setupIonicReact();
@@ -36,7 +36,7 @@ const App: React.FC = () => (
         <Route path="/" component={Main} />
         <Route path="/overlay-hooks" component={OverlayHooks} />
         <Route path="/overlay-components" component={OverlayComponents} />
-        <Route path="/overlay-auto-mount" component={AutoMountComponent} />
+        <Route path="/overlay-auto-mount" component={keepContentsMounted} />
         <Route path="/tabs" component={Tabs} />
       </IonRouterOutlet>
     </IonReactRouter>
diff --git a/packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx b/packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx
index af1be4b5a13..7aa94ec893c 100644
--- a/packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx
+++ b/packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx
@@ -7,7 +7,7 @@ import {
   IonPopover,
 } from '@ionic/react';
 
-const AutoMountComponent: React.FC = () => {
+const keepContentsMounted: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
   const [showPopover, setShowPopover] = useState(false);
 
@@ -17,14 +17,14 @@ const AutoMountComponent: React.FC = () => {
         <IonButton id="open-modal" onClick={() => setShowModal(true)}>Open Modal</IonButton>
         <IonButton id="open-popover" onClick={() => setShowPopover(true)}>Open Popover</IonButton>
 
-        <IonModal autoMountComponent={true} id="default-modal" isOpen={showModal} onDidDismiss={() => setShowPopover(false)}>
+        <IonModal keepContentsMounted={true} id="default-modal" isOpen={showModal} onDidDismiss={() => setShowPopover(false)}>
           <IonContent>
             <IonButton onClick={() => setShowModal(false)}>Dismiss</IonButton>
             Modal Content
           </IonContent>
         </IonModal>
 
-        <IonPopover autoMountComponent={true} isOpen={showPopover} onDidDismiss={() => setShowPopover(false)}>
+        <IonPopover keepContentsMounted={true} isOpen={showPopover} onDidDismiss={() => setShowPopover(false)}>
           <IonContent>
             <IonButton onClick={() => setShowPopover(false)}>Dismiss</IonButton>
             Popover Content
@@ -35,4 +35,4 @@ const AutoMountComponent: React.FC = () => {
   );
 };
 
-export default AutoMountComponent;
+export default keepContentsMounted;
diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts
index a8a0e53eb38..ffd080d8fd3 100644
--- a/packages/vue/src/components/Overlays.ts
+++ b/packages/vue/src/components/Overlays.ts
@@ -29,7 +29,7 @@ export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('io
     
 export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController);
     
-export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'autoMountComponent', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'swipeToClose', 'trigger']);
+export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'keepContentsMounted', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'swipeToClose', 'trigger']);
     
-export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'autoMountComponent', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
+export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'keepContentsMounted', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
     
diff --git a/packages/vue/src/vue-component-lib/overlays.ts b/packages/vue/src/vue-component-lib/overlays.ts
index ec87ecf8895..ede3ac4a379 100644
--- a/packages/vue/src/vue-component-lib/overlays.ts
+++ b/packages/vue/src/vue-component-lib/overlays.ts
@@ -162,7 +162,7 @@ export const defineOverlayContainer = <Props extends object>(name: string, defin
         return h(
           name,
           { ...restOfProps, ref: elementRef },
-          (isOpen.value || restOfProps.autoMountComponent) ? slots : undefined
+          (isOpen.value || restOfProps.keepContentsMounted) ? slots : undefined
         )
       }
     });
diff --git a/packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js b/packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js
index f7de0aa5dad..075d8220671 100644
--- a/packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js
+++ b/packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js
@@ -1,4 +1,4 @@
-describe('overlays - autoMountComponent', () => {
+describe('overlays - keepContentsMounted', () => {
   beforeEach(() => {
     cy.viewport(1000, 900);
     cy.visit('http://localhost:8080/overlays-auto-mount')

From dcf7ee8306b316ce5435668e9166df5e339f68a6 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 29 Jun 2022 11:23:34 -0400
Subject: [PATCH 06/14] chore(): update keep-contents-mounted

---
 packages/vue/test-app/src/views/OverlaysAutoMount.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue/test-app/src/views/OverlaysAutoMount.vue b/packages/vue/test-app/src/views/OverlaysAutoMount.vue
index e4351355a34..f0628ef9fae 100644
--- a/packages/vue/test-app/src/views/OverlaysAutoMount.vue
+++ b/packages/vue/test-app/src/views/OverlaysAutoMount.vue
@@ -18,7 +18,7 @@
 
       <ion-modal
         id="auto-mount-modal"
-        :auto-mount-component="true"
+        :keep-contents-mounted="true"
         trigger="open-auto-mount-modal"
       >
         <ModalContent :title="overlayProps.title"></ModalContent>
@@ -26,7 +26,7 @@
 
       <ion-popover
         id="auto-mount-popover"
-        :auto-mount-component="true"
+        :keep-contents-mounted="true"
         trigger="open-auto-mount-popover"
       >
         <PopoverContent :title="overlayProps.title"></PopoverContent>

From f4abff48b228855c9a3779e5f3dbfee4a828545b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 29 Jun 2022 12:02:33 -0400
Subject: [PATCH 07/14] chore(): run build

---
 core/api.txt             |  4 ++--
 core/src/components.d.ts | 32 ++++++++++++++++----------------
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/core/api.txt b/core/api.txt
index 6b7f6f2026f..dec444946d4 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -767,7 +767,6 @@ ion-menu-toggle,prop,menu,string | undefined,undefined,false,false
 
 ion-modal,shadow
 ion-modal,prop,animated,boolean,true,false,false
-ion-modal,prop,keepContentsMounted,boolean,false,false,false
 ion-modal,prop,backdropBreakpoint,number,0,false,false
 ion-modal,prop,backdropDismiss,boolean,true,false,false
 ion-modal,prop,breakpoints,number[] | undefined,undefined,false,false
@@ -777,6 +776,7 @@ ion-modal,prop,handle,boolean | undefined,undefined,false,false
 ion-modal,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
 ion-modal,prop,initialBreakpoint,number | undefined,undefined,false,false
 ion-modal,prop,isOpen,boolean,false,false,false
+ion-modal,prop,keepContentsMounted,boolean,false,false,false
 ion-modal,prop,keyboardClose,boolean,true,false,false
 ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
@@ -888,7 +888,6 @@ ion-popover,shadow
 ion-popover,prop,alignment,"center" | "end" | "start" | undefined,undefined,false,false
 ion-popover,prop,animated,boolean,true,false,false
 ion-popover,prop,arrow,boolean,true,false,false
-ion-popover,prop,keepContentsMounted,boolean,false,false,false
 ion-popover,prop,backdropDismiss,boolean,true,false,false
 ion-popover,prop,component,Function | HTMLElement | null | string | undefined,undefined,false,false
 ion-popover,prop,componentProps,undefined | { [key: string]: any; },undefined,false,false
@@ -897,6 +896,7 @@ ion-popover,prop,enterAnimation,((baseEl: any, opts?: any) => Animation) | undef
 ion-popover,prop,event,any,undefined,false,false
 ion-popover,prop,htmlAttributes,undefined | { [key: string]: any; },undefined,false,false
 ion-popover,prop,isOpen,boolean,false,false,false
+ion-popover,prop,keepContentsMounted,boolean,false,false,false
 ion-popover,prop,keyboardClose,boolean,true,false,false
 ion-popover,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-popover,prop,mode,"ios" | "md",undefined,false,false
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
index cb7f66bef10..dce67a1407d 100644
--- a/core/src/components.d.ts
+++ b/core/src/components.d.ts
@@ -1511,10 +1511,6 @@ export namespace Components {
           * If `true`, the modal will animate.
          */
         "animated": boolean;
-        /**
-          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
-         */
-        "keepContentsMounted": boolean;
         /**
           * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
          */
@@ -1575,6 +1571,10 @@ export namespace Components {
           * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.
          */
         "isOpen": boolean;
+        /**
+          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "keepContentsMounted": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -1894,10 +1894,6 @@ export namespace Components {
           * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
          */
         "arrow": boolean;
-        /**
-          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
-         */
-        "keepContentsMounted": boolean;
         /**
           * If `true`, the popover will be dismissed when the backdrop is clicked.
          */
@@ -1944,6 +1940,10 @@ export namespace Components {
           * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
          */
         "isOpen": boolean;
+        /**
+          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "keepContentsMounted": boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -5442,10 +5442,6 @@ declare namespace LocalJSX {
           * If `true`, the modal will animate.
          */
         "animated"?: boolean;
-        /**
-          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
-         */
-        "keepContentsMounted"?: boolean;
         /**
           * A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified.
          */
@@ -5496,6 +5492,10 @@ declare namespace LocalJSX {
           * If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code.
          */
         "isOpen"?: boolean;
+        /**
+          * If `true`, the component passed into `ion-modal` will automatically be mounted when the modal is created. The component will remain mounted even when the modal is dismissed. However, the component will be destroyed when the modal is destroyed. This property is not reactive and should only be used when initially creating a modal.  Note: This feature only applies to inline modals in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "keepContentsMounted"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */
@@ -5749,10 +5749,6 @@ declare namespace LocalJSX {
           * If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode.
          */
         "arrow"?: boolean;
-        /**
-          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
-         */
-        "keepContentsMounted"?: boolean;
         /**
           * If `true`, the popover will be dismissed when the backdrop is clicked.
          */
@@ -5791,6 +5787,10 @@ declare namespace LocalJSX {
           * If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code.
          */
         "isOpen"?: boolean;
+        /**
+          * If `true`, the component passed into `ion-popover` will automatically be mounted when the popover is created. The component will remain mounted even when the popover is dismissed. However, the component will be destroyed when the popover is destroyed. This property is not reactive and should only be used when initially creating a popover.  Note: This feature only applies to inline popovers in JavaScript frameworks such as Angular, React, and Vue.
+         */
+        "keepContentsMounted"?: boolean;
         /**
           * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
          */

From d604f551aaa90332ac051c38a01f46d07dc3f23f Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 29 Jun 2022 12:10:33 -0400
Subject: [PATCH 08/14] chore(): run vue build

---
 packages/vue/src/components/Overlays.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts
index ffd080d8fd3..a5f9d104a9e 100644
--- a/packages/vue/src/components/Overlays.ts
+++ b/packages/vue/src/components/Overlays.ts
@@ -29,7 +29,7 @@ export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('io
     
 export const IonToast = /*@__PURE__*/ defineOverlayContainer<JSX.IonToast>('ion-toast', defineIonToastCustomElement, ['animated', 'buttons', 'color', 'cssClass', 'duration', 'enterAnimation', 'header', 'htmlAttributes', 'icon', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'position', 'translucent'], toastController);
     
-export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'keepContentsMounted', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'swipeToClose', 'trigger']);
+export const IonModal = /*@__PURE__*/ defineOverlayContainer<JSX.IonModal>('ion-modal', defineIonModalCustomElement, ['animated', 'backdropBreakpoint', 'backdropDismiss', 'breakpoints', 'canDismiss', 'enterAnimation', 'handle', 'htmlAttributes', 'initialBreakpoint', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'presentingElement', 'showBackdrop', 'swipeToClose', 'trigger']);
     
-export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'keepContentsMounted', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
+export const IonPopover = /*@__PURE__*/ defineOverlayContainer<JSX.IonPopover>('ion-popover', defineIonPopoverCustomElement, ['alignment', 'animated', 'arrow', 'backdropDismiss', 'component', 'componentProps', 'dismissOnSelect', 'enterAnimation', 'event', 'htmlAttributes', 'isOpen', 'keepContentsMounted', 'keyboardClose', 'leaveAnimation', 'mode', 'reference', 'showBackdrop', 'side', 'size', 'translucent', 'trigger', 'triggerAction']);
     

From d216a88074188ebaa2fdd8ae7c5338f28b7fd7eb Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Wed, 29 Jun 2022 12:30:28 -0400
Subject: [PATCH 09/14] chore(): update react test app

---
 packages/react/test-app/src/App.tsx                           | 4 ++--
 .../{AutoMountComponent.tsx => KeepComponentsMounted.tsx}     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)
 rename packages/react/test-app/src/pages/overlay-components/{AutoMountComponent.tsx => KeepComponentsMounted.tsx} (93%)

diff --git a/packages/react/test-app/src/App.tsx b/packages/react/test-app/src/App.tsx
index 9e85c3d8a60..8f5237f1500 100644
--- a/packages/react/test-app/src/App.tsx
+++ b/packages/react/test-app/src/App.tsx
@@ -24,7 +24,7 @@ import './theme/variables.css';
 import Main from './pages/Main';
 import OverlayHooks from './pages/overlay-hooks/OverlayHooks';
 import OverlayComponents from './pages/overlay-components/OverlayComponents';
-import keepContentsMounted from './pages/overlay-components/keepContentsMounted';
+import KeepContentsMounted from './pages/overlay-components/KeepContentsMounted';
 import Tabs from './pages/Tabs';
 
 setupIonicReact();
@@ -36,7 +36,7 @@ const App: React.FC = () => (
         <Route path="/" component={Main} />
         <Route path="/overlay-hooks" component={OverlayHooks} />
         <Route path="/overlay-components" component={OverlayComponents} />
-        <Route path="/overlay-auto-mount" component={keepContentsMounted} />
+        <Route path="/overlay-auto-mount" component={KeepContentsMounted} />
         <Route path="/tabs" component={Tabs} />
       </IonRouterOutlet>
     </IonReactRouter>
diff --git a/packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx b/packages/react/test-app/src/pages/overlay-components/KeepComponentsMounted.tsx
similarity index 93%
rename from packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx
rename to packages/react/test-app/src/pages/overlay-components/KeepComponentsMounted.tsx
index 7aa94ec893c..8f4e852737b 100644
--- a/packages/react/test-app/src/pages/overlay-components/AutoMountComponent.tsx
+++ b/packages/react/test-app/src/pages/overlay-components/KeepComponentsMounted.tsx
@@ -7,7 +7,7 @@ import {
   IonPopover,
 } from '@ionic/react';
 
-const keepContentsMounted: React.FC = () => {
+const KeepContentsMounted: React.FC = () => {
   const [showModal, setShowModal] = useState(false);
   const [showPopover, setShowPopover] = useState(false);
 
@@ -35,4 +35,4 @@ const keepContentsMounted: React.FC = () => {
   );
 };
 
-export default keepContentsMounted;
+export default KeepContentsMounted;

From f997c78c018d43c2aa427005af36d1162013658d Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 29 Jun 2022 12:41:37 -0400
Subject: [PATCH 10/14] Rename KeepComponentsMounted.tsx to
 KeepContentsMounted.tsx

---
 .../{KeepComponentsMounted.tsx => KeepContentsMounted.tsx}        | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename packages/react/test-app/src/pages/overlay-components/{KeepComponentsMounted.tsx => KeepContentsMounted.tsx} (100%)

diff --git a/packages/react/test-app/src/pages/overlay-components/KeepComponentsMounted.tsx b/packages/react/test-app/src/pages/overlay-components/KeepContentsMounted.tsx
similarity index 100%
rename from packages/react/test-app/src/pages/overlay-components/KeepComponentsMounted.tsx
rename to packages/react/test-app/src/pages/overlay-components/KeepContentsMounted.tsx

From cf0e55fed5b7a52b039041d718d0703bf3b39342 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 1 Jul 2022 10:09:42 -0400
Subject: [PATCH 11/14] chore(): update angular wording

---
 ...o-mount.spec.ts => keep-contents-mounted.spec.ts} |  8 ++++----
 angular/test/test-app/src/app/app-routing.module.ts  |  2 +-
 .../test-app/src/app/keep-contents-mounted/index.ts  |  2 ++
 .../keep-contents-mounted-routing.module.ts}         |  6 +++---
 .../keep-contents-mounted.component.html}            |  0
 .../keep-contents-mounted.component.ts}              |  6 +++---
 .../keep-contents-mounted.module.ts                  | 12 ++++++++++++
 .../test-app/src/app/overlay-auto-mount/index.ts     |  2 --
 .../overlay-auto-mount/overlay-auto-mount.module.ts  | 12 ------------
 9 files changed, 25 insertions(+), 25 deletions(-)
 rename angular/test/test-app/e2e/src/{overlay-auto-mount.spec.ts => keep-contents-mounted.spec.ts} (89%)
 create mode 100644 angular/test/test-app/src/app/keep-contents-mounted/index.ts
 rename angular/test/test-app/src/app/{overlay-auto-mount/overlay-auto-mount-routing.module.ts => keep-contents-mounted/keep-contents-mounted-routing.module.ts} (59%)
 rename angular/test/test-app/src/app/{overlay-auto-mount/overlay-auto-mount.component.html => keep-contents-mounted/keep-contents-mounted.component.html} (100%)
 rename angular/test/test-app/src/app/{overlay-auto-mount/overlay-auto-mount.component.ts => keep-contents-mounted/keep-contents-mounted.component.ts} (56%)
 create mode 100644 angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.module.ts
 delete mode 100644 angular/test/test-app/src/app/overlay-auto-mount/index.ts
 delete mode 100644 angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts

diff --git a/angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts b/angular/test/test-app/e2e/src/keep-contents-mounted.spec.ts
similarity index 89%
rename from angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts
rename to angular/test/test-app/e2e/src/keep-contents-mounted.spec.ts
index c49fdad8010..a4bc99167fb 100644
--- a/angular/test/test-app/e2e/src/overlay-auto-mount.spec.ts
+++ b/angular/test/test-app/e2e/src/keep-contents-mounted.spec.ts
@@ -7,13 +7,13 @@ describe('overlays - keepContentsMounted', () => {
     });
 
     it('should mount component if true', () => {
-      cy.visit('/overlay-auto-mount');
+      cy.visit('/keep-contents-mounted');
 
       cy.get('ion-modal ion-content').should('exist');
     });
 
     it('should keep component mounted after dismissing if true', () => {
-      cy.visit('/overlay-auto-mount');
+      cy.visit('/keep-contents-mounted');
 
       cy.get('#open-modal').click();
 
@@ -36,13 +36,13 @@ describe('overlays - keepContentsMounted', () => {
     });
 
     it('should mount component if true', () => {
-      cy.visit('/overlay-auto-mount');
+      cy.visit('/keep-contents-mounted');
 
       cy.get('ion-popover ion-content').should('exist');
     });
 
     it('should keep component mounted after dismissing if true', () => {
-      cy.visit('/overlay-auto-mount');
+      cy.visit('/keep-contents-mounted');
 
       cy.get('#open-popover').click();
 
diff --git a/angular/test/test-app/src/app/app-routing.module.ts b/angular/test/test-app/src/app/app-routing.module.ts
index c32274881f7..6ffdfd8d324 100644
--- a/angular/test/test-app/src/app/app-routing.module.ts
+++ b/angular/test/test-app/src/app/app-routing.module.ts
@@ -31,7 +31,7 @@ const routes: Routes = [
   { path: 'modals', component: ModalComponent },
   { path: 'modal-inline', loadChildren: () => import('./modal-inline').then(m => m.ModalInlineModule) },
   { path: 'view-child', component: ViewChildComponent },
-  { path: 'overlay-auto-mount', loadChildren: () => import('./overlay-auto-mount').then(m => m.OverlayAutoMountModule) },
+  { path: 'keep-contents-mounted', loadChildren: () => import('./keep-contents-mounted').then(m => m.OverlayAutoMountModule) },
   { path: 'popover-inline', loadChildren: () => import('./popover-inline').then(m => m.PopoverInlineModule) },
   { path: 'providers', component: ProvidersComponent },
   { path: 'router-link', component: RouterLinkComponent },
diff --git a/angular/test/test-app/src/app/keep-contents-mounted/index.ts b/angular/test/test-app/src/app/keep-contents-mounted/index.ts
new file mode 100644
index 00000000000..c949db9a98f
--- /dev/null
+++ b/angular/test/test-app/src/app/keep-contents-mounted/index.ts
@@ -0,0 +1,2 @@
+export * from './keep-contents-mounted.component';
+export * from './keep-contents-mounted.module';
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts b/angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts
similarity index 59%
rename from angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts
rename to angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts
index 10354fc47ac..e453cb212e0 100644
--- a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount-routing.module.ts
+++ b/angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted-routing.module.ts
@@ -1,16 +1,16 @@
 import { NgModule } from "@angular/core";
 import { RouterModule } from "@angular/router";
-import { OverlaykeepContentsMounted } from ".";
+import { OverlayKeepContentsMounted } from ".";
 
 @NgModule({
   imports: [
     RouterModule.forChild([
       {
         path: '',
-        component: OverlaykeepContentsMounted
+        component: OverlayKeepContentsMounted
       }
     ])
   ],
   exports: [RouterModule]
 })
-export class OverlayAutoMountRoutingModule { }
+export class OverlayKeepContentsMountedRoutingModule { }
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html b/angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.component.html
similarity index 100%
rename from angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.html
rename to angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.component.html
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts b/angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.component.ts
similarity index 56%
rename from angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts
rename to angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.component.ts
index 737cf2fafcd..ccf0e901652 100644
--- a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.component.ts
+++ b/angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.component.ts
@@ -6,8 +6,8 @@ import { Component } from "@angular/core";
  * enabled.
  */
 @Component({
-  selector: 'app-overlay-auto-mount',
-  templateUrl: 'overlay-auto-mount.component.html'
+  selector: 'app-keep-contents-mounted',
+  templateUrl: 'keep-contents-mounted.component.html'
 })
-export class OverlaykeepContentsMounted {
+export class OverlayKeepContentsMounted {
 }
diff --git a/angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.module.ts b/angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.module.ts
new file mode 100644
index 00000000000..265e8501267
--- /dev/null
+++ b/angular/test/test-app/src/app/keep-contents-mounted/keep-contents-mounted.module.ts
@@ -0,0 +1,12 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+import { IonicModule } from "@ionic/angular";
+import { OverlayKeepContentsMountedRoutingModule } from "./keep-contents-mounted-routing.module";
+import { OverlayKeepContentsMounted } from "./keep-contents-mounted.component";
+
+@NgModule({
+  imports: [CommonModule, IonicModule, OverlayKeepContentsMountedRoutingModule],
+  declarations: [OverlayKeepContentsMounted],
+  exports: [OverlayKeepContentsMounted]
+})
+export class OverlayAutoMountModule { }
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/index.ts b/angular/test/test-app/src/app/overlay-auto-mount/index.ts
deleted file mode 100644
index 652113fa738..00000000000
--- a/angular/test/test-app/src/app/overlay-auto-mount/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './overlay-auto-mount.component';
-export * from './overlay-auto-mount.module';
diff --git a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts b/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts
deleted file mode 100644
index dc06fd04066..00000000000
--- a/angular/test/test-app/src/app/overlay-auto-mount/overlay-auto-mount.module.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { NgModule } from "@angular/core";
-import { IonicModule } from "@ionic/angular";
-import { OverlayAutoMountRoutingModule } from "./overlay-auto-mount-routing.module";
-import { OverlaykeepContentsMounted } from "./overlay-auto-mount.component";
-
-@NgModule({
-  imports: [CommonModule, IonicModule, OverlayAutoMountRoutingModule],
-  declarations: [OverlaykeepContentsMounted],
-  exports: [OverlaykeepContentsMounted]
-})
-export class OverlayAutoMountModule { }

From 3654126694a38ac18cf9d08cdae2f4b52ce7daeb Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 1 Jul 2022 14:10:49 +0000
Subject: [PATCH 12/14] chore(): update angular wording

---
 .../{AutoMount.spec.ts => KeepContentsMounted.spec.ts}    | 8 ++++----
 packages/react/test-app/src/App.tsx                       | 2 +-
 packages/react/test-app/src/pages/Main.tsx                | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)
 rename packages/react/test-app/cypress/integration/overlay-components/{AutoMount.spec.ts => KeepContentsMounted.spec.ts} (89%)

diff --git a/packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts b/packages/react/test-app/cypress/integration/overlay-components/KeepContentsMounted.spec.ts
similarity index 89%
rename from packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts
rename to packages/react/test-app/cypress/integration/overlay-components/KeepContentsMounted.spec.ts
index f7f0491fc11..b466e0e7536 100644
--- a/packages/react/test-app/cypress/integration/overlay-components/AutoMount.spec.ts
+++ b/packages/react/test-app/cypress/integration/overlay-components/KeepContentsMounted.spec.ts
@@ -7,13 +7,13 @@ describe('keepContentsMounted', () => {
     });
 
     it('should mount component if true', () => {
-      cy.visit('/overlay-auto-mount');
+      cy.visit('/keep-contents-mounted');
 
       cy.get('ion-modal ion-content').should('exist');
     });
 
     it('should keep component mounted after dismissing if true', () => {
-      cy.visit('/overlay-auto-mount');
+      cy.visit('/keep-contents-mounted');
 
       cy.get('#open-modal').click();
 
@@ -36,13 +36,13 @@ describe('keepContentsMounted', () => {
     });
 
     it('should mount component if true', () => {
-      cy.visit('/overlay-auto-mount');
+      cy.visit('/keep-contents-mounted');
 
       cy.get('ion-popover ion-content').should('exist');
     });
 
     it('should keep component mounted after dismissing if true', () => {
-      cy.visit('/overlay-auto-mount');
+      cy.visit('/keep-contents-mounted');
 
       cy.get('#open-popover').click();
 
diff --git a/packages/react/test-app/src/App.tsx b/packages/react/test-app/src/App.tsx
index 8f5237f1500..c499afbf9f5 100644
--- a/packages/react/test-app/src/App.tsx
+++ b/packages/react/test-app/src/App.tsx
@@ -36,7 +36,7 @@ const App: React.FC = () => (
         <Route path="/" component={Main} />
         <Route path="/overlay-hooks" component={OverlayHooks} />
         <Route path="/overlay-components" component={OverlayComponents} />
-        <Route path="/overlay-auto-mount" component={KeepContentsMounted} />
+        <Route path="/keep-contents-mounted" component={KeepContentsMounted} />
         <Route path="/tabs" component={Tabs} />
       </IonRouterOutlet>
     </IonReactRouter>
diff --git a/packages/react/test-app/src/pages/Main.tsx b/packages/react/test-app/src/pages/Main.tsx
index f9a3328e771..f4800b69db2 100644
--- a/packages/react/test-app/src/pages/Main.tsx
+++ b/packages/react/test-app/src/pages/Main.tsx
@@ -32,8 +32,8 @@ const Main: React.FC<MainProps> = () => {
           </IonItem>
         </IonList>
         <IonList>
-          <IonItem routerLink="/overlay-auto-mount">
-            <IonLabel>Auto Mount Overlay Components</IonLabel>
+          <IonItem routerLink="/keep-contents-mounted">
+            <IonLabel>Keep Contents Mounted Overlay Components</IonLabel>
           </IonItem>
         </IonList>
         <IonList>

From 94bc59d00f0b65fa8e8930ba161a471d7c51cda4 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 1 Jul 2022 14:12:06 +0000
Subject: [PATCH 13/14] chore(): update vue wording

---
 packages/vue/test-app/src/router/index.ts                       | 2 +-
 .../{OverlaysAutoMount.vue => OverlaysKeepContentsMounted.vue}  | 0
 ...overlays-auto-mount.js => overlays-keep-contents-mounted.js} | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename packages/vue/test-app/src/views/{OverlaysAutoMount.vue => OverlaysKeepContentsMounted.vue} (100%)
 rename packages/vue/test-app/tests/e2e/specs/{overlays-auto-mount.js => overlays-keep-contents-mounted.js} (96%)

diff --git a/packages/vue/test-app/src/router/index.ts b/packages/vue/test-app/src/router/index.ts
index 04587eb1ad5..3ee8099c4a7 100644
--- a/packages/vue/test-app/src/router/index.ts
+++ b/packages/vue/test-app/src/router/index.ts
@@ -26,7 +26,7 @@ const routes: Array<RouteRecordRaw> = [
     component: () => import('@/views/Overlays.vue')
   },
   {
-    path: '/overlays-auto-mount',
+    path: '/keep-contents-mounted',
     component: () => import('@/views/OverlaysAutoMount.vue')
   },
   {
diff --git a/packages/vue/test-app/src/views/OverlaysAutoMount.vue b/packages/vue/test-app/src/views/OverlaysKeepContentsMounted.vue
similarity index 100%
rename from packages/vue/test-app/src/views/OverlaysAutoMount.vue
rename to packages/vue/test-app/src/views/OverlaysKeepContentsMounted.vue
diff --git a/packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js b/packages/vue/test-app/tests/e2e/specs/overlays-keep-contents-mounted.js
similarity index 96%
rename from packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js
rename to packages/vue/test-app/tests/e2e/specs/overlays-keep-contents-mounted.js
index 075d8220671..269f3fc25c7 100644
--- a/packages/vue/test-app/tests/e2e/specs/overlays-auto-mount.js
+++ b/packages/vue/test-app/tests/e2e/specs/overlays-keep-contents-mounted.js
@@ -1,7 +1,7 @@
 describe('overlays - keepContentsMounted', () => {
   beforeEach(() => {
     cy.viewport(1000, 900);
-    cy.visit('http://localhost:8080/overlays-auto-mount')
+    cy.visit('http://localhost:8080/keep-contents-mounted')
   })
   describe('modal', () => {
     it('should not mount component if false', () => {

From 4c94f4a561e9197ebfb4a53107a4bf2e3f78ae4a Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 1 Jul 2022 14:42:36 +0000
Subject: [PATCH 14/14] chore(): fix missing routing url

---
 packages/vue/test-app/src/router/index.ts                      | 2 +-
 .../vue/test-app/src/views/OverlaysKeepContentsMounted.vue     | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/vue/test-app/src/router/index.ts b/packages/vue/test-app/src/router/index.ts
index 3ee8099c4a7..7f6f9422d95 100644
--- a/packages/vue/test-app/src/router/index.ts
+++ b/packages/vue/test-app/src/router/index.ts
@@ -27,7 +27,7 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/keep-contents-mounted',
-    component: () => import('@/views/OverlaysAutoMount.vue')
+    component: () => import('@/views/OverlaysKeepContentsMounted.vue')
   },
   {
     path: '/inputs',
diff --git a/packages/vue/test-app/src/views/OverlaysKeepContentsMounted.vue b/packages/vue/test-app/src/views/OverlaysKeepContentsMounted.vue
index f0628ef9fae..a28e923c207 100644
--- a/packages/vue/test-app/src/views/OverlaysKeepContentsMounted.vue
+++ b/packages/vue/test-app/src/views/OverlaysKeepContentsMounted.vue
@@ -48,8 +48,7 @@ import {
   IonModal,
   IonPopover,
 } from '@ionic/vue';
-import { defineComponent, ref } from 'vue';
-import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
+import { defineComponent } from 'vue';
 import ModalContent from '@/components/ModalContent.vue';
 import PopoverContent from '@/components/PopoverContent.vue';