Ionic-framework: [Ionic v4-beta.3] ion-input: autofill / autocomplete not working.

[tja4472]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.0 (C:\Users\Tim\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.3
   @angular-devkit/core       : 0.7.3
   @angular-devkit/schematics : 0.7.3
   @angular/cli               : 6.1.3
   @ionic/ng-toolkit          : 1.0.6
   @ionic/schematics-angular  : 1.0.5

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.0
   OS     : Windows 10

Describe the Bug
autofill/autocomplete not working with ion-input.

Steps to Reproduce

<ion-content padding>
  <input type="text" autocomplete="name"/>
  <form [formGroup]="userForm">
    <ion-list>
      <ion-item>
        <ion-label position="floating">Name</ion-label>
        <ion-input formControlName="name"
                   autofocus
                   autocomplete="name"
                   type="text"></ion-input>
      </ion-item>

Related Code

Expected Behavior
autofill/autocomplete to work as html input.

Additional Context

[Nightbr]

Same here, after further investigation seems to be browsers which not handle input in Shadow DOM. Look at this issue: https://github.com/w3c/webcomponents/issues/572

Finally they decided to include Shadow root to look for autocomplete attr look at this: https://github.com/whatwg/html/pull/2149

So we have to options here:

• Wait a patch in browser to look in Shadow root to find our autocomplete input to autofill them
• Find a workaround and dev it (I'm looking a workaround if someone has an idea to manipulate the browser autofill API)

Cheers

[paulstelzer]

Could you check if this issue is resolved with beta.19? We are now using a input without Shadow dom, so maybe this will work now :)

[tja4472]

Works with text ion-input.

With username/password the password field is not picked up.

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title> Home </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form method="post">
    <!--
      HTML input:<input type="text" name="fname" autocomplete="on" /><br />
      HTML input username:<input type="text" name="username" autocomplete="on" /><br />
      HTML input password:<input type="password" name="password" autocomplete="on" /><br />
    -->

    <ion-item>
      <ion-label position="floating">ion-input</ion-label>
      <ion-input name="fname" autocomplete="on" type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">ion-input username</ion-label>
      <ion-input name="username" autocomplete="on" type="text"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label position="floating">ion-input password</ion-label>
      <ion-input name="password" autocomplete="on" type="password"></ion-input>
    </ion-item>

    <input type="submit" />
    <!-- <ion-button type="submit" expand="block">Sign In</ion-button> -->
  </form>
</ion-content>

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (C:\Users\Tim\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-beta.19
   @angular-devkit/build-angular : 0.11.3
   @angular-devkit/schematics    : 7.1.3
   @angular/cli                  : 7.1.3
   @ionic/angular-toolkit        : 1.2.0

System:

   NodeJS : v10.14.2 (C:\Program Files\nodejs\node.exe)
   npm    : 6.5.0
   OS     : Windows 10

[tja4472]

https://github.com/tja4472/ion-input-autofill

:gift:

[paulstelzer]

I close this for now because it should fixed with #17043 . After rc.2 release you can check again and if it still not working, just create a comment here and I reopen.

[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.