Ionic-framework: unclickable ion-inputes

[m-shojaei]

Ionic version:
[x ] 3.x

I'm submitting a ...
[x ] bug report

Current behavior:
in a simple form with ion-inputs, if I press one of the inputs and then select the other one to write something in it, I will not be able to focus on the first input. so basically after focus out of the inputs, they will be disabled.

Expected behavior:
I want to be able to switch back and forth between inputs.

Steps to reproduce:
just adding this form to a blank page. and then trying to switch between them. the thing is that the form is long enough so that by pressing on it Ionic had to scroll for it this will happen. so I added some br elements to reproduce to the scenario.
also, this is happening in some of the android devices.

<ion-content>
  <ion-list>
 <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
     <form #loginForm="ngForm">
      <ion-item>
        <ion-input></ion-input>
      </ion-item>

      <ion-item>
        <ion-input ></ion-input>
      </ion-item>
    </form>
  </ion-list>
</ion-content>

Other information:

**

@ionic/cli-utils  : 1.19.0
ionic (Ionic CLI) : 3.19.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.0.0
Ionic Framework    : ionic-angular 3.6.1

System:

Node : v8.9.1
npm  : 5.5.1
OS   : Windows 10

Environment Variables:

ANDROID_HOME : not set

Misc:

backend : pro

**

[kensodemann]

Hello! Thank you for opening an issue with us!

Can you provide more information on where you see this happen?

I have seen several similar reports such as (there may be others):

13414

13560

13581 (not an input, but similar behavior with a textarea)

But is all cases the frustrating bit is that I can _only_ reproduce the issue if I use Chrome or Opera with the devtools open, with the device toolbar open, and an Android device selected. I have not been able to duplicate at all on my Note 4 which is running Android 6.0. I have also not been able to duplicate this on Chrome running just as a web app or in any other browser.

I can also duplicate it here: https://ionicframework.com/docs/components/#floating-labels
But only again in Chrome/Opera with the Android device selected. Not in Firefox or Safari.

this is happening in some of the android devices

Can you tell me which ones? including Android version if you know it?

This does not seem to have anything to do with Ionic Framework version as yours is reported above as 3.6.1 while others have been using 3.8.0 and 3.9.2. Also, 3.6.1 is old enough where this would have been reported before, but these reports have all been recent.

So, any help you can give in nailing down just where this issue lies and what changed would be handy.

If you could upload the source for your sample app to GitHub, that may also be handy. I will try copying your markup into one of my test apps later, but I suspect the result will be the same as before (which is that I can only duplicate it on Chrome when emulating a device but not anywhere else and not on my actual device).

Very frustrating little issue.

Thank you for using Ionic

[arjennap]

see this comment to reproduce the issue: https://github.com/ionic-team/ionic/issues/13414#issuecomment-349627601

I might have found the issue, and an ugly solution
I did compare the html and css from the following code in my login.html
<ion-list> <ion-item class="input-item"> <ion-label stacked>E-mailadres</ion-label> <ion-input formControlName="email" type="email"></ion-input> </ion-item> </ion-list>

I noticed a difference between iOS and Android
in android, there is an element in the code that is not in the iOS code:
<div class="input-cover"></div>

this element has an absolute position and is over the ion-input.
I simply (and ugly) fixed it by adding
.input-cover { display: none!important }
to my css. and now it works.

@kensodemann can you tell me why this
<div class="input-cover"></div>
is added to the ion input on android?

[m-shojaei]

@kensodemann the HTML snippet that I have added to the issue is enough to reproduce the problem.

I have the issue with the chrome browser as well. but only in android platform. also, my android device is Lenovo B which has the Android version 6.0.

[m-shojaei]

@arjennap is right. I have able to make it re-Clickable by removing the unnecessary element!!! that is very weird!!!
Thanks @arjennap

[Polm1]

Hi I am currently stuck with this issue that appears to be related to https://github.com/ionic-team/ionic/issues/6228 and for the only fix found are to disable scrollAssist and force .input-cover { display: none!important } (which seems to disable scrollAssist as side-effect).

I didn't noticed that input-cover div was not showing up for iOS, will look into this.

I have experienced this issue too only with certain Android devices (with different viewports) such as Huawei p9 lite, p10 lite, honor 8. Issue has not been experienced with OnePlus5 and Nexus6

[m-shojaei]

the .input-cover class has a touch-action property, I am thinking that the supporting of this property on different browsers is the issue.

Applications using Touch_events disable the browser handling of gestures by calling preventDefault(), but should also use touch-action to ensure the browser knows the intent of the application before any event listeners have been invoked.

https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action

[Polm1]

@m-shojaei I've noticed touch-action too but trying to disable it, doesn't produce much benefits...forgot to mention in my previous comment

[Polm1]

Currently trying to hack some properties of .input-cover div such as height: 0 !important

[m-shojaei]

but any change to that class will break the scrollAssist, doesn't it?

[Polm1]

@m-shojaei previously I've tried only with display: none which breaks scrollAssist for sure...by the way with height: 0 !important is breaking it too...

[kensodemann]

@arjennap -

@kensodemann can you tell me why this
<div class="input-cover"></div>
is added to the ion input on android?

Looking at the code, that is necessary when scrollAssist is true. I have not been able to track down exactly why it is necessary as it is not a new addition and has been there forever through multiple refactorings, so tracking it to a specific commit is difficult. But that is consistent with what @m-shojaei & @Polm1 are seeing (that is, if you attempt to remove it, scrollAssist breaks.

[kensodemann]

@m-shojaei

I have the issue with the chrome browser as well. but only in android platform.

Yup, that is the _only_ place I have been able to duplicate this (well, that an Opera, but same engine there...)

also, my android device is Lenovo B which has the Android version 6.0.

And it also displays the issue? Interesting. I have not been able to get the issue on an actual device yet. I'll make sure I have scrollAssist set to true and try again.

[kensodemann]

@m-shojaei - tried your code. Certainly causes issues in Chrome w/ Android emulation. Does not, however, cause issues on my actual Android device, which is running Android 6.0.1

Just want to double check that you have indeed seen this when the app has been installed on your Lenovo B device.

[m-shojaei]

@kensodemann Yes, I have seen it in my Lenovo B.

[vksgautam1]

ya i am using same app on different phones and it is creating this issue only in LG L BELLO Lollypop 5.0.2

[Polm1]

A little update: today morning I've updated chrome to 63.0.3239.84 and, at least in device emulation mode, the issue seems to be solved :) can anyone please test https://test-ionic-input-vs-scroll-issues-505.stackblitz.io setting emulation to "nexus 5x" to verify it?
Hopefully with next updates of render engine will be solved too on android devices.

[arjennap]

@Polm1 I tested (after updating chrome) your test app and my own test app and it does work now in my browser (nexus 6p, nexus 5X and galaxy 5s).

But, it still doesn't work on my actual device (nexus P6).

@kensodemann I noticed the scrollAssist failure, so i dont want to use the display: none;. I tried some things with z-index and absolute positions of the input element and the input-cover, but that didn't fix it either.

[kensodemann]

@arjennap - this sounds an awful lot like a bug with the browser version that is on your phone, so I do not suggest messing with the input-cover div at all as that will break scrollAssist.

[Polm1]

Ok, @arjennap, thanks for keeping an eye on it: as expected in real devices still it's an issue because there's a good chance that it's related to some fault on render engine level.
So I suppose (and hope) that, until a fix will came by ionic side, could be fixed with further engine updates. @kensodemann makes sense?

[arjennap]

@Polm1 My chrome browser version on android is still 62.0.3202.84 i will wait for updates and hope that it will fix the issue. if it does ill let you know

[Polm1]

👍 thanks for update, @arjennap

[kensodemann]

@Polm1 - the built app still uses whatever webview is installed on the phone, so if there is a bug in the blink engine it makes sense that it would occur in the built app as well

This being a bug in the blink engine is consistent with everything I am seeing on this so far, including it happening all of a sudden in Chrome & Opera (both blink engine based browsers) and only on certain Android devices but not mine and it "magically" going away with a Chrome update.

So yeah, I think everything you said makes sense with this being fixed by further engine updates.

[Polm1]

Thanks, @kensodemann hope that this will fixed soon

[Gaabe]

Any news os this issue? I'm having the same problem. I'm disabling scroll assist for now, but it would be really nice if it worked with it on.

[kensodemann]

I have confirmed that this is indeed fixed on the latest issue of Chrome, further confirming my suspicions that this is a bug with certain versions of the blink engine. I am going to close this as it is not an Ionic Framework issue.

[arjennap]

@Polm1 @kensodemann

I just removed chrome from my android device and installed the chrome beta app.
i disabled the "normal" chrome, restarted the app and guess what.....

it works..

i will wait for chrome to fix it, thank you for your time guys!

[Polm1]

@arjennap happy to hear it, let's wait next update :)

[arjennap]

im just going to spam all the info i have 😄

Working chrome versions
59.0.3071.86
60.0.3112.113
61.0.3163.79
63.0.3239.84

Broken chrome versions
62.0.3202.84
62.0.3202.94

according to google it shouldn't take to long, see
https://chromereleases.googleblog.com/
for more info

[Polm1]

Oorah!Issue solved with last chrome update (63) on my Huawei P9 Lite :) good weekend to all

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