bug: disabled select inside item is not being fully disabled

[Airdevelopments]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

Note: The issue only seems to appear when using Angular standalone components

When disabling a <ion-select> inside of a <ion-item>, the hover and touch / click styling still appears as enabled and pointer events are still executed.

Expected Behavior

We would expect the styling to appear disabled as well as point-events: none causing no (click) handlers to be called. This does seem to be the case when using the classic IonicModule.forRoot() approach and non-standalone components.

Steps to Reproduce

1. Click on the button within the stackblitz
2. Observe the styling when hovering / clicking on the ion-select
3. Observe the console output when clicking

Code Reproduction URL

https://stackblitz.com/edit/angular-vvbkmf-cz7bqx?file=src%2Fapp%2Fapp.component.html

Ionic Info

see Stackblitz setup

Additional Information

No response

[averyrousseau]

Thank you for the issue. The main issue is that ion-item is not receiving the item-interactive-disabled class. We need to dig more into why this is happening, but in the meantime a workaround would be to manually apply the class to ion-item, or use the styles it adds (cursor: default and pointer-events: none) directly.

I can at least confirm that this is specific to Angular Standalone, and does not occur in React or Vue.

[sean-perkins]

Hello @Airdevelopments, I'm having issues reviewing the reproduction link provided. It does not want to load in Chrome. Would you be kind enough to submit a github repository or double check the link provided and see if you can provided a forked version of the Stackbliz template (not just the preview link).

Thank you!

[Airdevelopments]

@sean-perkins
I updated the URL in my original post. Hope this helps.

[sean-perkins]

@Airdevelopments really appreciate the timely update on the reproduction!

Here's a dev-build to test with:

npm install @ionic/angular@8.1.1-dev.11714676345.1df5b5f8

Forked reproduction with dev-build: https://stackblitz.com/edit/angular-vvbkmf-zrcmlc

Let me know if you experience any issues!