bug: ionic vue multi tab setup breaks navigation

[Berkmann18]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behaviour:

Whether I'm dynamically setting the color attribute on ion-input based on the ion-input's value, the field will will switch between remaining or being cleared.

Expected behaviour:

The ion-input should change the colour when the relevant dynamic colour changes without clearing the value.

Steps to reproduce:

1. Create a Ionic Vue app using the ionic CLI or

npm i @ionic/vue@0.3.1 @vue/cli-service@4.5.6 vue@3.0.0-rc.10 -D #alongside all the necessary dependencies needed for Vue

Related code:
Template that contains:

<ion-item>
  <ion-label position="floating">Email address</ion-label>
  <ion-input
    type="email"
    autocomplete="email"
    @update:modelValue="email = $event"
    inputmode="email"
    required
    @ionBlur="checkEmail"
    :color="redify('email')"
  ></ion-input>
</ion-item>

The script section contains:

setup() {
  const email = ref('email');
  const validity = reactive({
    email: true
  });

  const checkEmail = () => {
    validity.email = isValidEmail(email.value); //isValidEmail is a utility function that returns `true` is the input is a valid email address or `false` if not
  }

  const redify = (field) => {
    if (!(field in validity)) throw new Error(`"${field}" isn't a valid validity field name`);
    return validity[field] ? 'dark' : 'danger'; //same error happens when '' is used instead of 'dark'
  }
}

insert short code snippets here

Other information:

When logging the values of the dynamic colour, it does change as expected.
Ionic info:

Ionic:

   Ionic CLI       : 6.11.8 (/home/maxie/.nvm/versions/node/v14.11.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 0.3.1

Capacitor:

   Capacitor CLI   : 2.4.1
   @capacitor/core : 2.4.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.11.0 (/home/maxie/.nvm/versions/node/v14.11.0/bin/node)
   npm    : 6.14.8
   OS     : Linux 5.8

[liamdebeasi]

Thanks for the issue. Can you give this a try on @ionic/vue@0.5.0 and @ionic/vue-router@0.5.0? We resolved some v-model issues in 0.4.0 that I think will fix the issue you reported.

If the issue still persist, please provide a GitHub repo with an application that reproduces the issue. Thanks!

[Berkmann18]

So it seems that now I can go back to using v-model (as it previously seemed to not allow user inputs to override the value), I tried using the :color="..." on both the <ion-input /> and <ion-label /> and I get the following error:

index.js?8a30:904 Uncaught (in promise) TypeError: Cannot read property 'classList' of undefined
    at handlePageTransition (index.js?8a30:904)

Which points to the following line (from the Ionic code):

leavingEl.classList.add('ion-page-hidden');

Statically setting the colour works fine (i.e. color="danger") tho.

Regarding the side effect I mentioned, that has disappeared so technically this issue is resolved but I'll keep it open given the newly found error (feel free to close it tho).

[liamdebeasi]

Can you provide a repo that shows this issue happening? I cannot reproduce this on my end.

[Berkmann18]

After noticing this exact error, I've been trying to pin point what was causing that and it seems that a component like:

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Profile Update</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-card>
        <ion-card-content>
          <!-- Note: content that was commented out which didn't prevent the error from happening on this lazy-loaded route, were removed -->
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-page>
</template>

<script>
import {
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonContent,
  IonCard,
  IonCardContent,
} from '@ionic/vue';
export default {
  name: 'Auth',
  components: {
    IonPage,
    IonHeader,
    IonTitle,
    IonToolbar,
    IonContent,
    IonCard,
    IonCardContent,
  },
  setup() {
    return {
    };
  }
};
</script>

The error happens in two views which both have the boilerplate above (with more code tho, but I didn't put what was commented out to have a concise example).

[liamdebeasi]

Can you provide this as a full GitHub repo that I can clone? I still cannot reproduce the issue using the code snippet you provided.