bug: ion-chip is disabled when ion-input is disabled when both are in same ion-item

[patricsteiner]

Bug Report

Ionic version: [x] 5.x

Current behavior: Given: ion-item that contains an ion-chip and an ion-input. I can interact with both (i.e. not disabled). When ion-input is disabled, ion-chip will also be disabled.

Expected behavior: Only ion-input should be disabled. ion-chip should not be disabled.

Steps to reproduce:

1. Run the stackblitz below
2. Verify that ion-chip is clickable (cursor changes and you can see a ripple effect)
3. Disable the ion-input with the toggle button
4. ion-chip is not clickable anymore

Related code: https://stackblitz.com/edit/ionic-angular-v5-85pzwf?file=src/app/app.component.html

<ion-item>
  <ion-chip>
    <span>Why am I disabled?</span>
    <ion-icon name="close-circle"></ion-icon>
  </ion-chip>
  <ion-input [disabled]="true" placeholder="write something..."></ion-input>
</ion-item>

Other information: Probably related: #18670

Ionic info:

Ionic:

   Ionic CLI                     : 6.14.1 (C:\Users\Patric\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.6.6
   @angular-devkit/build-angular : 0.1102.12
   @angular-devkit/schematics    : 11.2.12
   @angular/cli                  : 11.2.12
   @ionic/angular-toolkit        : 3.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v14.16.1 (C:\Program Files\nodejs\node.exe)
   npm    : 7.11.2
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. We probably need to extend https://github.com/ionic-team/ionic-framework/commit/dfa2b13c3a408c6288acc38ce5de480ff04c88fc to account for other interactive components.

[sazerzac]

This is also the case with ion-button (@ionic/angular 5.8.1). You can recreate by adjusting the previous stackblitz as well. Fixable with the css used in https://github.com/ionic-team/ionic-framework/issues/18670.

[liamdebeasi]

Hi there,

We are proposing some changes to form components that seek to resolve this issue. We would love your feedback on these proposed changes! You can read more about the changes and leave comments here: https://github.com/ionic-team/ionic-framework/discussions/25661

[liamdebeasi]

Thanks for the report. In Ionic 7 we are revamping the ion-input infrastructure to decouple it from ion-item. The new feature is opt-in to make migration easier, but this issue should be resolved using that new feature. We will have a beta for Ionic 7 in the future where developers can test and provide feedback. We will also have a migration guide for how to update to the new ion-input syntax.

The work required to resolve this issue has been completed, so I am going to close this thread. Let me know if there are any questions.

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