Ionic-framework: Input going into 2 lines on focus on iOS

[jenil]

Short description of the problem:

Input going into 2 lines on focus on iOS
Please see https://forum.ionicframework.com/t/input-going-into-2-lines-on-focus/52830

Steps to reproduce:

1. Make a simple form with floating input and test is on the simulator or an actual device
2. This works fine in the browser

Which Ionic Version? 2.x

[jgw96]

Hello! Thanks for opening an issue with us! Would you mind sharing your code with me? A plunker, repo or even just posting it here? Thanks for using Ionic!

[jenil]

Can you check this video?

[jenil]

@jgw96 did you get a chance to check this?

[jgw96]

Sorry for the delay on this! I did see your video. Would you mind posting a plunker or repo that i could reproduce this with?

[jenil]

This works fine on the web, it is only when u run it on a device. I think its due to the keyboard sliding up and the floating input animation happening simultaneously.

[jgw96]

Hello! I cant seem to reproduce this issue on my iphone 5 running ios 9.3.2. Would you be able to post a plunker or repo that i could reproduce this issue with?

[jenil]

Hey!

Here is the HTML of my page:

<ion-navbar primary *navbar>
  <ion-title>Signup</ion-title>
  <ion-buttons end>
    <button nav-pop>
      <ion-icon name="close"></ion-icon>
    </button>
  </ion-buttons>
</ion-navbar>

<ion-content padding class="signup">
  <ion-list>
    <form #signupForm="ngForm" (ngSubmit)="onSignup(signupForm)">
      <ion-item>
        <ion-label floating>First name</ion-label>
        <ion-input [(ngModel)]="signup.firstName" ngControl="firstName" type="text" #firstName="ngForm" required></ion-input>
      </ion-item>

      <ion-item [danger]="mobileNumber">
        <ion-label floating>Mobile Number</ion-label>
        <ion-input [(ngModel)]="signup.mobileNumber" ngControl="mobileNumber" type="tel" #mobileNumber="ngForm" required maxlength="10" pattern="\d{10}" inputmode="numeric"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Email</ion-label>
        <ion-input type="email" [(ngModel)]="signup.email" ngControl="email" type="email" #email="ngForm" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Password</ion-label>
        <ion-input [(ngModel)]="signup.password" ngControl="password" type="password" #password="ngForm" required></ion-input>
      </ion-item>

      <ion-item>
        <ion-label floating>Referral Code</ion-label>
        <ion-input [(ngModel)]="signup.refCode" ngControl="refCode" type="text" #refCode="ngForm" text-uppercase></ion-input>
      </ion-item>

      <br>

      <ion-row responsive-sm>
        <ion-col>
          <button [disabled]="!signupForm.valid" type="submit" primary block>Sign up</button>
        </ion-col>
        <ion-col>
          <button type="button" small clear dark block><small>Terms &amp; Conditions</small></button>
        </ion-col>
      </ion-row>
    </form>
  </ion-list>
</ion-content>

[brandyscarney]

I was able to reproduce this using the following end-to-end test: http://localhost:8000/dist/e2e/input/form-inputs/

Running it on my iPhone in Safari.

[guillenotfound]

@brandyscarney sorry for off topic but can you run that test on your device?

[brandyscarney]

@ZiFFeL1992 Sorry I don't understand the question. I usually run our end-to-end tests locally using Safari on my device.

[guillenotfound]

@brandyscarney how do you run those test on your device?

I mean if I run gulp watch.e2e I can test on my computer browser, but not on my physical device.

[brandyscarney]

@ZiFFeL1992 Ah, I usually just use ngrok: https://ngrok.com/

[guillenotfound]

@brandyscarney just 1 word, AWESOME!

[brandyscarney]

@ZiFFeL1992 Yeah we all love it! It works great for switching between apps (running with ionic serve) and e2e tests, too. :)

[ValterSantosMatos]

Hi there, any update on this one?

[brandyscarney]

I'm actually not able to reproduce this anymore using the latest nightly. Could you try installing that and let me know if you still have the issue? npm install --save ionic-angular@nightly

[brandyscarney]

I confirmed that this has been fixed in the nightly, so it will be in the rc.4 release. Thanks!