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