mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 17:42:15 +08:00
fix(accordion-group): correct accordion is open on load (#28510)
Issue number: resolves #28506
---------
<!-- 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. -->
ion-accordion-group would not set the value when using it as a Angular
standalone component and data binding:
``` html
<ion-accordion-group #accordionGroup [value]="fromValue">
<ion-accordion value="turtles">
<ion-item slot="header" color="light">
<ion-label>First Accordion</ion-label>
</ion-item>
<div class="ion-padding" slot="content">First Content</div>
</ion-accordion>
<ion-accordion value="second">
<ion-item slot="header" color="light">
<ion-label>Second Accordion</ion-label>
</ion-item>
<div class="ion-padding" slot="content">Second Content</div>
</ion-accordion>
</ion-accordion-group>
```
The problem here is Angular is setting the value of the accordion group
after the component has been initialized (but not loaded) and before the
component watchers are setup, so
[valueChanged](d69ad43482/core/src/components/accordion-group/accordion-group.tsx (L78)
)
does not fire automatically.
## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- Run valueChanged() in componentDidLoad().
-
-
## Does this introduce a breaking change?
- [ ] Yes
- [x] No
<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->
## Other information
<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
---------
Co-authored-by: Mohamed Ben Makhlouf <benmakhlouf@softcatalyst.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
This commit is contained in:

committed by
GitHub

parent
04d32b6d68
commit
a000dd2c0b
@ -180,6 +180,16 @@ export class AccordionGroup implements ComponentInterface {
|
||||
if (this.readonly) {
|
||||
this.readonlyChanged();
|
||||
}
|
||||
/**
|
||||
* When binding values in frameworks such as Angular
|
||||
* it is possible for the value to be set after the Web Component
|
||||
* initializes but before the value watcher is set up in Stencil.
|
||||
* As a result, the watcher callback may not be fired.
|
||||
* We work around this by manually calling the watcher
|
||||
* callback when the component has loaded and the watcher
|
||||
* is configured.
|
||||
*/
|
||||
this.valueChanged();
|
||||
}
|
||||
|
||||
/**
|
||||
|
Reference in New Issue
Block a user