Directive to help autofill an ion-input for iOS

autofill.directive.ts

import { Directive, ElementRef, OnInit } from '@angular/core';
import { Capacitor } from '@capacitor/core';

@Directive({
  selector: '[appAutofill]'
})
export class AutofillDirective implements OnInit {

  constructor(private el: ElementRef) {
  }

  ngOnInit(): void {
    if (Capacitor.getPlatform() !== 'ios') { return; };
    setTimeout(() => {
      try {
        this.el.nativeElement.children[0].addEventListener('change', (e) => {
          this.el.nativeElement.value = (e.target as any).value;
        });
      } catch { }
    }, 100); // Need some time for the ion-input to create the input element
  }
}

I'm on vue so need to adapt this, looks like it's adding a change listener to the ionic element, to update the value of the shadow element? Shouldn't that happen already?

As 6 months have passed, Is this still required, or did ionic fix the bug in an update?

I came here from https://capacitorjs.com/docs/guides/autofill-credentials

Ended up coming across this issue as well with vue. I converted the above to a vue directive. Example usage below.

Vue Directive

app.directive("autofillpatch", {
  mounted: (el) => {
    if (Capacitor.getPlatform() === "ios") {
      setTimeout(() => {
        try {
          el.nativeElement.children[0].addEventListener("change", (e) => {
            el.nativeElement.value = (e.target as any).value;
          });
        } catch (e) {
          console.error(e);
        }
      }, 100); // Need some time for the ion-input to create the input element
    }
  },
});

Example

<IonInput
  v-model="email"
  placeholder="you@example.com"
  inputmode="email"
  type="email"
  autocomplete="email"
  autocapitalize="off"
  name="email"
  required
  v-autofillpatch
/>