Skip to content

bug: ion-item > inputs are all disabled if a child of ion-item is #18670

Closed
@alexsoyes

Description

@alexsoyes

Bug Report

Ionic version:

[x] 4.6

Current behavior:
Let's pretend a ion-item have some input childs like ion-checkbox or ion-input. If one of the child input is [disabled]="true", the whole ion-item is disabled too.

Expected behavior:
The parent should not be responsable for child disability.

Steps to reproduce:
Just have a ion-item with some child inputs.

Related code:

<ion-item>
    <ion-checkbox [disabled]="true"></ion-checkbox>
    <ion-input type="text" [disabled]="false"></ion-input>
</ion-item>

One of the child is disabled, so ion-item is disabled too.

Other information:
I used this workaround to keep the ion-item "not disabled".

ion-content {
  ion-item {
    pointer-events: auto;
  }
}

It seems like the .item-interactive-disabled class is responsible for this behavior.

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.1
   Ionic Framework               : @ionic/angular 4.6.0
   @angular-devkit/build-angular : 0.800.6
   @angular-devkit/schematics    : 8.0.6
   @angular/cli                  : 8.0.6
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 7 other plugins)

Utility:

   cordova-res : 0.3.0 (update available: 0.5.1)
   native-run  : not installed

System:

   NodeJS : v11.14.0 (/usr/bin/node)
   npm    : 6.9.2
   OS     : Linux 5.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions