Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: disabled select inside item is not being fully disabled #29234

Closed
3 tasks done
Airdevelopments opened this issue Mar 28, 2024 · 4 comments · Fixed by #29448
Closed
3 tasks done

bug: disabled select inside item is not being fully disabled #29234

Airdevelopments opened this issue Mar 28, 2024 · 4 comments · Fixed by #29448
Labels
package: angular @ionic/angular package type: bug a confirmed bug report

Comments

@Airdevelopments
Copy link

Airdevelopments commented Mar 28, 2024 •
edited

Prerequisites

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
@ionitron-bot ionitron-bot bot added the triage label Mar 28, 2024
@amandaejohnston
Copy link
Contributor

amandaejohnston commented Apr 2, 2024 •
edited

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.

@amandaejohnston amandaejohnston added the needs: investigation This issue is waiting on more investigation from the Ionic Team. label Apr 2, 2024
@ionitron-bot ionitron-bot bot removed the triage label Apr 2, 2024
@sean-perkins
Copy link
Contributor

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!

@sean-perkins sean-perkins added the needs: reply the issue needs a response from the user label May 1, 2024
@Airdevelopments
Copy link
Author

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

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels May 2, 2024
@sean-perkins sean-perkins self-assigned this May 2, 2024
@sean-perkins
Copy link
Contributor

@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!

@sean-perkins sean-perkins mentioned this issue May 2, 2024
Merged
2 tasks
@sean-perkins sean-perkins changed the title bug: Angular Standalone Components - Disabled IonSelect inside IonItem is not being fully disabled bug: disabled select inside item is not being fully disabled May 2, 2024
@sean-perkins sean-perkins added package: angular @ionic/angular package type: bug a confirmed bug report and removed needs: investigation This issue is waiting on more investigation from the Ionic Team. labels May 2, 2024
@ionitron-bot ionitron-bot bot removed the triage label May 2, 2024
@sean-perkins sean-perkins removed their assignment May 3, 2024
github-merge-queue bot pushed a commit that referenced this issue May 3, 2024
@sean-perkins
fix(angular): persist select disabled state in item (#29448)
dfb72d7 
Issue number: resolves #29234

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

In certain scenarios, such as in Angular where the property binding is
set a few frames after the element is rendered, the `ionStyle` event
from `ion-select` can be emitted before `ion-item` has registered an
event listener.

This results in situations like setting the `ion-select` as initially
disabled can cause the item to not treat the element as not interactable
(receives pointer events).

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Emits the `ionStyle` event when the `ion-select` is rendered.
- `ion-item` consistently detects the state of `ion-select` and applies
the appropriate styles

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Forked reproduction and dev-build available here:
#29234 (comment)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
package: angular @ionic/angular package type: bug a confirmed bug report
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(angular): persist select disabled state in item ionic-team/ionic-framework
3 participants
@sean-perkins @Airdevelopments @amandaejohnston