Ionic-framework: 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/[email protected] @vue/[email protected] [email protected] -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/[email protected] and @ionic/[email protected]? 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.

[Berkmann18]

@liamdebeasi Sure, I've sent you an invite.

[liamdebeasi]

Thanks -- is there a way I can access the reproduction without having to setup your API server locally?

[Berkmann18]

@liamdebeasi Not at the moment, I'm not sure how I could easily get something set up so you could test without having to set it up.

[liamdebeasi]

Can you reproduce the isolated issue in a blank Ionic starter application?

[Berkmann18]

@liamdebeasi Yup, Try with the latest changes on the repo.

[liamdebeasi]

Thanks, this looks to be an issue with the multi-tabs setup. I will look into a fix.

[Livijn]

I am also getting TypeError: Cannot read property 'classList' of undefined when switching between completely blank Tabs.

[liamdebeasi]

@Livijn This was fixed in v0.5.2:

npm install @ionic/[email protected] @ionic/[email protected]

[liamdebeasi]

@Berkmann18 Can you try this on Ionic Vue 0.5.2? I believe most of the issues you are seeing have been fixed in that version:

npm install @ionic/[email protected] @ionic/[email protected]

[liamdebeasi]

Hey there,

I am going to close this issue. I updated your application to Ionic Vue 0.5.2 and can no longer reproduce the issue described in https://github.com/ionic-team/ionic-framework/issues/22166#issuecomment-699171602. It ended up being the same issue as https://github.com/ionic-team/ionic-framework/issues/22166#issuecomment-702078531, but I did not realize it at the time 😄 .

Please feel free to open a new issue if you run into any additional bugs. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.