VueJS Password AutoFill value empty

Ionic Framework Ionic Vue
1

Have an issue where using autofill (this isn’t about domain autofill, just using the iOS “password” button above the text input, searching for password and selecting) doesn’t actually update the v-model.

I can see the value in the shadow Dom but on submit nothing is passed. I have tried using refs but that value is undefined.

<ion-input ref="input" name="password" :type="passwordFieldType" v-model="form.password" id="password" required autocomplete="current-password" style="--padding-start: 0.5rem; color:#ffffff" class="bg-green-600 rounded w-full border-b border-white mt-2.5" @change="getPassword"></ion-input>
2

Possibly related to bug: ios, autofill not working properly in wkwebview · Issue #23335 · ionic-team/ionic-framework · GitHub.

3

You wouldn’t believe how long I have been looking for this.

Is there a work around for Vue - I can’t work out from your workaround what is happening here?

4

The workaround for Vue should be very similar. To summarize, you need to do the following:

  1. Get a reference to each ion-input.
  2. Call the getInputElement method on each ion-input. (I.e. inputRef.value.$el.getInputElement()
  3. Add a change event listener to the resulting input element.
  4. In a requestAnimationFrame inside of the event callback, set whatever variable you are using to track these form values with the value of the event target.

Some rough pseudo code to be done inside the setup function of your component:

...

const emailInput = ref();
const email = ref();

onIonViewDidEnter(async () => {
  const nativeEmailInput = await emailInput.value.$el.getInputElement();
  nativeEmailInput.addEventListener('change', (ev: Event) => {
    requestAnimationFrame(() => {
      email.value = (ev.target as HTMLInputElement).value;
    });
  });
});

...