Repository navigation
bug: ion-chip is disabled when ion-input is disabled when both are in same ion-item #23331
Description
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:
- Run the stackblitz below
- Verify that ion-chip is clickable (cursor changes and you can see a ripple effect)
- Disable the ion-input with the toggle button
- 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
Activity
liamdebeasi commentedon May 19, 2021
Thanks for the issue. We probably need to extend dfa2b13 to account for other interactive components.
sazerzac commentedon Oct 6, 2021
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 #18670.
liamdebeasi commentedon Aug 2, 2022
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: #25661
liamdebeasi commentedon Jan 11, 2023
Thanks for the report. In Ionic 7 we are revamping the
ion-inputinfrastructure to decouple it fromion-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 newion-inputsyntax.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 commentedon Feb 10, 2023
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.