Ionic-framework: Ionic V4 iOS ion-input focus

Created on 14 Sep 2018  路  16Comments  路  Source: ionic-team/ionic-framework

Bug Report

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.8.1
   @angular-devkit/schematics : 0.8.1
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.4, (and 4 other plugins)

System:

   NodeJS : v9.8.0 (/usr/local/bin/node)
   npm    : 6.2.0
   OS     : macOS High Sierra
   Xcode  : Xcode 9.4.1 Build version 9F2000

I created an Ionic 4 / Angular 6 application with a default login screen. I use the ionic component 'ion-input' as input fields. On iOS it displays a complete different input field for a split second, see screenshot.
Does anyone know a solution to this problem?

schermafbeelding 2018-09-14 om 15 05 40

triage

Most helpful comment

In app.module.ts

IonicModule.forRoot({
      scrollAssist: false
    }),

Helped me

All 16 comments

Same problem

Same Issue

Is there any fix in the works, or a work-around for this issue?

I noticed this issue in my Ionic app v4.0.0-beta.11. It occurs in an iPhone X iOS 11.4 (or 12, cant remember!) simulator and on an iPhone 6S iOS 12 real device.

ion-textareas seem to work fine though.

Same Issue here

It doesn't solve the issue but it's less ugly.
input{ display: none; } in our global.scss

Same Issue

Same issue - using v4 core

@ionic-team any advise to solve this issue?

same issue

Setting breakpoints on subtree modifications on the parent ion-item shows that the issue is the .native-input is being displayed when the ion-input receives focus.

image

Adding

.native-input {
  display: none !important;
}

to my global.scss seems to fix it for me.

In app.module.ts

IonicModule.forRoot({
      scrollAssist: false
    }),

Helped me

@szymonograbek what about scrollAssist, and what the relationship between them?

This is a known issue, There should be another issue for that, but can also been fixed in last beta.17. Can someone check?

This should be fixed in beta.18!

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.

Was this page helpful?
0 / 5 - 0 ratings