Login autocomplete keyboard bar appearing when it shouldn't in iOS 11.3


#1

Since iOS 11.3, which enabled the keychain/login autocomplete within webviews, the login autocomplete bar (this thing):


is appearing at unexpected times.

Specifically, once a login form or password input is focused and the bar is displayed once, the bar will display when any other (non-login/password) inputs are focused until the app is force-closed and reopened.

Not only does it appear at inappropriate times, the keychain bar actually appears instead of proper autocomplete bar for text inputs, so this is a definite problem for UX.

I realise this is arguably an Apple problem, but given the unlikelihood of it being fixed in a reasonable timeframe, I wondered if there is an Ionic/Cordova way around this?

The issue can be reproduced by cloning, building and running (on iOS 11.3) the following repo: https://github.com/johnmap/ionic-ios-keychain-nightmare

I’ve tried a few things, such as triggering a page refresh, URL change or form submission after the login form is dismissed – no luck with any of these. I’m aware of hacks that prevent the login autofill appearing in the first place – it would of course be preferable to have a solution that maintains the autofill functionality when it’s appropriate.

I’ve tried to provide all relevant info – please do let me know if I’ve missed anything. Thank you!

<EDIT>

Still hopeful for a fix that maintains the proper login autofill functionality where possible, but for now I have implemented a quick hack to prevent the login autofill bar from ever being triggered.

This is not good practice, but a last resort for apps that are broken by this issue, as was mine. This might seem like an obvious “dummy password field” hack, but the details are quite important to avoid ever triggering the autofill bar. Details below.

HTML: Make a dummy password input in addition to your actual password input. Important: Change your real password field to type=“text”. Fake password field should be type="password", but must be disabled="true" to avoid triggering autofill bar.

<div class="passwordShuffle">
  <ion-item [class.hidden]="showFakePassword" class="passwordReal">
    <ion-label floating>Password</ion-label>
      <ion-input autocapitalize="off" (ionFocus)="passFocused()" (ionBlur)="passLostFocus()" name="password" [(ngModel)]="password" type="text" #passwordInput></ion-input>
  </ion-item>
  <ion-item *ngIf="showFakePassword" class="passwordFake">
      <ion-label floating>Password</ion-label>
      <ion-input disabled="true" (click)="dummyClicked($event)" class="" name="passwordDummy" [(ngModel)]="password" type="password"></ion-input>
  </ion-item>

</div>

CSS: position the fake password input exactly on top of the real password input

.passwordShuffle{
	position: relative;
	display: block;
	height: 80px;
}

.passwordReal, .passwordFake{
	position: absolute;
	top: 0px;
}

.passwordFake input[disabled]{
	opacity: 1 !important;
}

.hidden{
	opacity: 0;
}

.emailInput{
	height: 80px;
}

TS: When dummy password field tapped, trigger focus on real password field (underneath). When the real password input gains focus, immediately change the input type to type="password" and hide the dummy password input. When the real password input loses focus, change type back to “text”, and show dummy password input.

passFocused(){
  this.passwordInput.type='password';
  this.showFakePassword = false;
}

passLostFocus(){
  this.passwordInput.type='text';
  this.showFakePassword = true;
}

dummyClicked(event){
  event.preventDefault();
  this.passwordInput.setFocus();
  return false;
}

</EDIT>

ionic info output:

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0 

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : ios 4.5.4
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-deploy : 1.9.2 
    Node       : v9.11.1
    npm        : 5.6.0 
    OS         : macOS High Sierra
    Xcode      : Xcode 9.3 Build version 9E145 

Environment Variables:

    ANDROID_HOME : not set

Misc:

    backend : pro

possibly related: Keyboard prediction bar not showing


Keyboard prediction bar not showing