fix(vue): adding class to IonPage no longer hides component (#25490)

ionic-team · Jun 21, 2022 · cbaa971 · cbaa971
1 parent 7821df2
commit cbaa971
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/packages/vue/src/components/IonPage.ts b/packages/vue/src/components/IonPage.ts
@@ -3,21 +3,18 @@ import { h, defineComponent } from 'vue';
 export const IonPage = /*@__PURE__*/ defineComponent({
   name: 'IonPage',
   props: {
-    isInOutlet: { type: Boolean, default: false },
     registerIonPage: { type: Function, default: () => {} }
   },
   mounted() {
     this.$props.registerIonPage(this.$refs.ionPage);
   },
-  setup(props, { attrs, slots }) {
-    const hidePageClass = (props.isInOutlet) ? 'ion-page-invisible' : '';
+  setup(_, { attrs, slots }) {
     return () => {
-      const existingClasses = attrs.class ?? '';
       return h(
         'div',
         {
           ...attrs,
-          ['class']: `ion-page ${hidePageClass} ${existingClasses}`,
+          ['class']: 'ion-page',
           ref: 'ionPage'
         },
         slots.default && slots.default()

diff --git a/packages/vue/src/components/IonRouterOutlet.ts b/packages/vue/src/components/IonRouterOutlet.ts
@@ -427,6 +427,11 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
        * as a result of a navigation change.
        */
       if (viewItem.registerCallback) {
+        /**
+         * Page should be hidden initially
+         * to avoid flickering.
+         */
+        ionPageEl.classList.add('ion-page-invisible');
         viewItem.registerCallback();
 
       /**
@@ -461,7 +466,6 @@ See https://ionicframework.com/docs/vue/navigation#ionpage for more information.
         let props = {
           ref: c.vueComponentRef,
           key: c.pathname,
-          isInOutlet: true,
           registerIonPage: (ionPageEl: HTMLElement) => registerIonPage(c, ionPageEl)
         }
 

diff --git a/packages/vue/test-app/tests/unit/page.spec.ts b/packages/vue/test-app/tests/unit/page.spec.ts
@@ -62,4 +62,25 @@ describe('IonPage', () => {
     expect(cmp.classes('ion-page')).toBe(true);
     expect(cmp.classes('custom-class')).toBe(true);
   });
+  it('should not re-add ion-page-invisible when setting the class', async () => {
+    const Page1 = {
+      template: `<ion-page :class="{ 'custom-class': addClass }"></ion-page>`,
+      name: 'Page1',
+      components: { IonPage },
+      data() {
+        return {
+          addClass: false
+        }
+      }
+    };
+
+    const wrapper = mount(Page1);
+
+    expect(wrapper.classes('custom-class')).toBe(false);
+
+    await wrapper.setData({ addClass: true });
+
+    expect(wrapper.classes('custom-class')).toBe(true);
+    expect(wrapper.classes('ion-page-invisible')).toBe(false);
+  });
 })