Text input initially disabled still show as disabled after being re-enabled via control.enable()

[tiffmaelite]

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

I'm submitting a ... [X] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior: When a form text input is created and disabled, the HTML element receives the "disabled" attribute. If later on the input is re-enabled from the component side, through calling "control.enable()", the HTML element still contains the disabled attribute, making it effectively rendered as disabled (at least by browsers). Because the form control considers the field to be enabled, but the input is disabled, the field will forever be invalid... If the field is also required, then the form can simply not be validated.

Expected behavior: After calling enable(), the input be editable and should no longer show as disabled (i.e. it should no longer have the disabled attribute).

Steps to reproduce:

• create ion-input in model-driven way, make form control initially disabled
• check that the underlying input has attribute "disabled=''"
• call formControl.enable()
• check that the form control is indeed enabled, but that the underlying input still shows up as disabled and cannot be edited (it still has attribute "disabled=''")

This can also be tested with an input initially enabled, then disabled then re-enabled. Bug is the same.

Related code: See http://plnkr.co/edit/C6RYK4?p=preview

Other information: IMHO, the attribute "disabled" should be omitted/removed if the form control is enabled, because an input is considered disabled as soon as it has the "disabled" attribute, whatever the value of that attribute is. c.f. https://www.w3.org/TR/html5/forms.html#concept-fe-disabled

The problem probably also exists for all other boolean attributes (c.f. https://www.w3.org/TR/html5/infrastructure.html#boolean-attribute ) on HTML input fields, such as "checked", "readOnly", "required", "multiple", "autofocus" etc. But as far as I know, only "required" and "disabled" might be set programmatically through the form control.

This does not seem to be a problem for ion-select (I only have ion-input and ion-select in my application and did not test other inputs), probably due to the fact that its rendering involves more divs than simply the ion-input tag wrapped around the native HTML input field.

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

global packages:

    @ionic/cli-utils : 1.5.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.5.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.1
    @ionic/cli-plugin-ionic-angular : 1.3.2
    Cordova Platforms               : browser 4.1.0 windows 4.4.3
    Ionic Framework                 : ionic-angular 3.5.0

System:

    Node       : v7.10.0
    OS         : Windows 8.1
    Xcode      : not installed
    ios-deploy : not installed
    ios-sim    : not installed

[jgw96]

Hello, thanks for using Ionic! Does this also happen with a native html5 input?

[tiffmaelite]

Hi @jgw96 I modified my initial plunker example to use a native HTML5 input instead of ion-input. As you can see at http://plnkr.co/edit/pTEcX3?p=preview , the actual behavior matches the expected one with a native HTML5 input. Thanks for looking into this issue

[ptitjes]

I just hit this bug. I'd like to add that the problem only happens in the browser build (and ionic serve). My android build works correctly and the ion-input does get enabled as expected.

@jgw96, is there a known workaround that I could temporarily use to fix my browser build ?

cli packages: (/usr/lib/node_modules)

    @ionic/cli-utils  : 1.12.0
    ionic (Ionic CLI) : 3.12.0

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

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

System:

    Android SDK Tools : 26.1.1
    Node              : v6.11.3
    npm               : 3.10.10 
    OS                : Linux 4.13

Misc:

    backend : pro

[kmandar44]

I just hit this bug. I'd like to add that the problem only happens in the browser build (and ionic serve). My android build works correctly and the ion-input does get enabled as expected.

Agree with @ptitjes. The feature does not work on the browser builds for IOS and Windows. It does however work for the Android build.

[seriousjelly]

+1 I have come across the same issue, Android build is fine works as expected, Web & iOS the disabled attribute on the input remains.

[ptitjes]

@chrisbratherton I believe this is fixed, as I don't use the hack anymore and it works OK. What beta version of Ionic do you use ?

[seriousjelly]

Oh really? Looks as though I am using 3.8.0 at the moment.

[ptitjes]

@chrisbratherton Oh sorry I forgot this issue was about 3.x ! Then maybe you can try this hack I was using on 3.9.2.

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!

[ionitron-bot[bot]]

Thanks for the issue! We have moved the source code and issues for Ionic 3 into a separate repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

Thank you for using Ionic!