Ionic-framework: ion-input are getting disabled

[vksgautam1]

Ionic version: (check one with "x")
(For Ionic 1.x issues, please use https://github.com/ionic-team/ionic-v1)
[ ] 2.x
[x ] 3.x
[ ] 4.x

I'm submitting a ... (check one with "x")
[ ] bug report
[ ] feature request

Please do not submit support requests or "How to" questions here. Instead, please use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:

after wrong login input in input boxes. i am unable to click on input box. same for validation.once a validation message come. unable to click on input box.after few clicks i am able to do again edit the input
Expected behavior:

Steps to reproduce:

Related code:

insert short code snippets here

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:\Users\DELL\AppData\Roaming\nvm\v8.9.0\node_modules)

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.2
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 25.2.5
    Node              : v8.9.0
    npm               : 5.5.1
    OS                : Windows 10

[naveddeshmukh]

Same Issue.

The ion-input elements gets disabled after losing focus, if it contains invalid value.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

cli packages: (C:Users\naved.dAppData\Roaming\npmnode_modules)

@ionic/cli-utils  : 1.17.0
ionic (Ionic CLI) : 3.17.0

global packages:

cordova (Cordova CLI) : 7.1.0

local packages:

@ionic/app-scripts : 2.1.4
Cordova Platforms  : android 6.2.3 browser 4.1.0 ios 4.4.0
Ionic Framework    : ionic-angular 3.6.1

System:

Android SDK Tools : 26.1.1
Node              : v8.9.0
npm               : 5.5.1
OS                : Windows 10

Environment Variables:

ANDROID_HOME : C:\Users\naved.d\AppData\Local\Android\sdk

Misc:

backend : legacy

[kensodemann]

Hello! Thank you for opening an issue with us! Would you be able to provide a sample application via GitHub that demonstrates the issue you are having? Thanks for using Ionic!

[vksgautam1]

this you can find with any application having inputbox with angular 5.

[vksgautam1]

the best scenario i can tell you, once a input box have focus, and we press android bottom navigation bar .after that we can not click on input box.that is the same thing is happening when we type on boxes again after again

[naveddeshmukh]

My Application is still using angular 4 but I am facing the similar issue.

[vksgautam1]

ok

[lilmidnit]

Same issue. Only occurs for me when I use a ion-label in conjunction with ion-input. No sample needed - documentation shows same problem.

https://ionicframework.com/docs/components/#floating-labels
in the Floating Labels demo, select Android, then click in Username input, then click in Password input - now you cannot click back in either.

Also when running it via "ionic serve" if I don't put chrome in emulate mode it works fine. If you put it in emulate mode the input will not be clickable after it receives and loses focus. Just updated to 3.18 and problem still exists.

-also the scroll bar freaks out in that demo when doing the same

[YuriBrunetto]

Same issue here but it only seems to appear when using Android 7.0.
I've tested in older and newer Androids and it seems to works fine...

[CesarRubenAlejandro]

I'm experiencing the same issue. It happens both in Android and iOS. Also during ionic serve simulator.
Ionic info:
cli packages:

@ionic/cli-utils : 1.18.0
ionic (Ionic CLI) : 3.18.0
global packages:

cordova (Cordova CLI) : 7.1.0
local packages:

@ionic/app-scripts : 3.0.0
Cordova Platforms : android 6.2.3 ios 4.4.0
Ionic Framework : ionic-angular 3.7.1
System:

Android SDK Tools : 25.2.3
Node : v6.10.2
npm : 5.2.0
OS : Windows 10

[kensodemann]

Thanks I’ll try and have a look later using the documentation but if someone could post a demo app that would always be helpful.

[kensodemann]

Definitely need a demo app as I cannot duplicate this at all.

[vksgautam1]

@keithdmoore
i tried it in gitlab.
https://gitlab.com/VivekGautam/my-test-ionic22.git

[vksgautam1]

i used the same app on other mobile. it is working fine. Issue is coming on LG L-Bello Lollypop 5.0.2. what could be the reason ?

[awdryn]

I'm having the same problem, the ion-input stops responding when it loses focus

[awdryn]

The problem seems to be related to the scroll setting when the ion-input gains focus.
So I disabled this and it worked for me.
In app.module.ts
...
IonicModule.forRoot(MyApp,{ scrollAssist: false }),

[lilmidnit]

I was able to reproduce by
a. creating a new project with the ionic super template.
b. changed both the email and password labels to floating on the login.html
c. run it via ionic serve in chrome browser, put chrome in device emulator mode (nexus 6P) and then went to the login page.

1. Clicked in email input (which has test@example) and the input got focus.
2. Clicked in the white-space below the "SIGN IN" button, the input lost focus
3. Clicked in the email input and it would not get focus

Sometimes it will work once a couple times but for me in the described scenario above if I repeat 1-3 it will either immediately stop gaining focus or it will after a couple of repeats.

As I already said above you can reproduce it right on the documentation demo page as well. It fails in chrome in the "android" demo. It works in Edge.

[keithdmoore]

Setting scrollAssist to false didn't work for me when using Chrome. I'm hoping this gets resolved very soon. This is quite a showstopper for me.

[kensodemann]

Interesting. I was _finally_ able to duplicate this, but it had to be in Chrome using Android emulation. The online docs work fine with Safari and Android.

[diegoheusser]

What @awdryn said worked for me.

IonicModule.forRoot(MyApp,{ scrollAssist: false })

[msevestre]

FYI: I have the same issue using the iOS simulator.

[sNju]

Worked for me { scrollAssist: false }.

[kensodemann]

I have _only_ been able to duplicate this in Chrome when using the Android emulation in the dev tools and when using Chrome against our documentation and choosing the Android device (example: https://ionicframework.com/docs/components/#stacked-labels).

I have not been able to duplicate this in any other browser, or in Chrome when running it without devtools open (IOW, just like a web app). Nor have I been able to duplicate this on an actual device.

If someone can duplicate this on an actual device or outside of Chrome dev-tools, please let me know, provide a link to some source that duplicates it, and I can re-open this to look into. Otherwise, this appears to be an issue with Chrome and not with the Ionic Framework code, and thus not something that we can address in any reasonable way.

[arjennap]

i have the same issue and i do not want to use the { scrollAssist: false } since it will break my layout.

@kensodemann Google Chrome version: 62.0.3202.94

if you want to reproduce the issue:

1. go to : https://ionicframework.com/docs/components/#floating-labels (_date: 12-06-2017_)
2. make sure u see the "floating labels" template and have the android device selected.
3. click the username and fill with @@ (i guess this makes the input invalid or something)
4. click the password field and leave it blank
5. make sure you unfocus the password field by clicking somewhere else in the device
6. From now on, you are unable to focus the username or the password field.

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