Skip to content

Commit

Permalink
fix(angular): persist select disabled state in item (#29448)
Browse files Browse the repository at this point in the history
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)
  • Loading branch information
sean-perkins committed May 3, 2024
1 parent 484fe25 commit dfb72d7
Showing 1 changed file with 18 additions and 4 deletions.
22 changes: 18 additions & 4 deletions core/src/components/select/select.tsx
Expand Up @@ -241,10 +241,6 @@ export class Select implements ComponentInterface {
this.ionChange.emit({ value });
}

componentWillLoad() {
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
}

async connectedCallback() {
const { el } = this;

Expand All @@ -270,6 +266,24 @@ export class Select implements ComponentInterface {
});
}

componentWillLoad() {
this.inheritedAttributes = inheritAttributes(this.el, ['aria-label']);
}

componentDidLoad() {
/**
* If any of the conditions that trigger the styleChanged callback
* are met on component load, it is possible the event emitted
* prior to a parent web component registering an event listener.
*
* To ensure the parent web component receives the event, we
* emit the style event again after the component has loaded.
*
* This is often seen in Angular with the `dist` output target.
*/
this.emitStyle();
}

disconnectedCallback() {
if (this.mutationO) {
this.mutationO.disconnect();
Expand Down

0 comments on commit dfb72d7

Please sign in to comment.