Ion-input shows only the first entered character on iOS

Hi everyone,

I am currently experiencing some trouble with an ion-input in a form.
The input field only shows the first character entered, until it looses focus or the expected number of characters has been entered. The same goes for deleting characters in it. The behaviour is shown in the gif below:

This was recorded on an iPhone SE but the problem also occurs on iPhone 5s, 6, 6s and 7. Not on Android nor in the browser!

The relevant code parts look as follows:

html:

<ion-content padding class="enter-code">
  <div class="shadowBox">
    <ion-card>
      <ion-card-header>
        Please enter your code
      </ion-card-header>
      <ion-card-content>
        <form [formGroup]="qrForm" (ngSubmit)="proceed()">
          <ion-list class="spacer">
            <ion-item class="enablelastline">
              <ion-input type="number" formControlName="qr" placeholder="Code"></ion-input>
              <ion-icon color="danger" [hidden]="qrForm.controls['qr'].valid || qrForm.controls['qr'].errors['required']" name="close-circle" item-right></ion-icon>
            </ion-item>
          </ion-list>
          <button ion-button full color="light" large type="submit" [disabled]="!qrForm.valid">Next</button>
        </form>
      </ion-card-content>
    </ion-card>
  </div>
</ion-content>

typescript:

import {Component} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {NavController, AlertController } from 'ionic-angular';
import {NextPage} from './next';

@Component({
  selector: 'enter-code',
  templateUrl: 'code.html'
})
export class EnterCodePage {
  public qrForm: FormGroup;
  public submitted: boolean; // keep track on whether form is submitted
  public events: any[] = []; // use later to display form changes
  private validCodes: Array<String> = ['123456789', '987654321'];

  constructor(private navCtrl: NavController, private alertCtrl: AlertController, private formBuilder: FormBuilder) {
    this.qrForm = formBuilder.group({
      qr: ['', Validators.compose([Validators.minLength(9), Validators.maxLength(9), Validators.required])]
    });
  }

  proceed() {
    if (this.validCodes.indexOf(this.qrForm.value.qr) > -1) {
      this.submitted = true; // set form submit to true
      this.navCtrl.push(NextPage, {
        qr: this.qrForm.value.qr
      });
    } else {
      this.alertCtrl.create({
        title: 'Your code is invalid.',
        subTitle: 'Your code is invalid. Please try again!',
        buttons: ['OK']
      }).present();
    }
  }
}

It is probably a mistake on my side but as much as I try, I cannot find it at this point. I use several forms in my app and all the other inputs work fine.

I’d appreciate any help here! Thanks in advance!

1 Like

Hey, I’m seeing exactly the same behaviour. Additionally my input has text-align: center; and as I type, the cursor moves from the center to the right (as if it had text-align: left) and no characters, but the first one are shown.

When I focus out of the field, it updates and aligns, as if nothing happened.

I’m also experiencing the same issue
have you found any solution?

thanks

Hello, the problem seems to be in the css. In my own case the problem was with an element that has z-index: -1

check your css and uncode any element having z-index to see the change

It seems very likely that there’s some sort of WKWebView rendering bug at play, here. When inspecting the CSS of the page that was suffering from this same problem, I came across the fact that disabling -webkit-overflow-scroll: touch (which is an Ionic style for the scrolling container that holds the page content) seems to solve the problem (at the significant expense of losing elastic scrolling). Researching that a little, I found http://www.456bereastreet.com/archive/201301/the_mysterious_webkit_placeholder_overflow_bug/ and https://stackoverflow.com/questions/28730103/ios-textarea-text-hidden-when-using-webkit-overflow-scrolling-touch which both led me to another discovery: this issue is likely triggered by the use of the floating or stacked label property for ion-label (and just one such label on the page, irrespective of which input it corresponds to, triggers the bug for all inputs on the page); and an alternative to using the fixed label property on all inputs seems to be to trigger WKWebView’s hardware acceleration through e.g. using -webkit-transform: translateZ(0px) on each affected input.

2 Likes

This worked for me (y)

6 Likes

This work for me too, thanks a lot.

-webkit-transform: translateZ(0px)

Thanks, This worked for me too.