Skip to content

Commit a000dd2

Browse files
medbenmakhloufMohamed Ben Makhloufliamdebeasi
authored
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](https://github.com/ionic-team/ionic-framework/blob/d69ad434827ea56b777cc3af4e591362ce8bcd99/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 <[email protected]> Co-authored-by: Liam DeBeasi <[email protected]>
1 parent 04d32b6 commit a000dd2

File tree

1 file changed

+10
-0
lines changed

1 file changed

+10
-0
lines changed

core/src/components/accordion-group/accordion-group.tsx

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,16 @@ export class AccordionGroup implements ComponentInterface {
180180
if (this.readonly) {
181181
this.readonlyChanged();
182182
}
183+
/**
184+
* When binding values in frameworks such as Angular
185+
* it is possible for the value to be set after the Web Component
186+
* initializes but before the value watcher is set up in Stencil.
187+
* As a result, the watcher callback may not be fired.
188+
* We work around this by manually calling the watcher
189+
* callback when the component has loaded and the watcher
190+
* is configured.
191+
*/
192+
this.valueChanged();
183193
}
184194

185195
/**

0 commit comments

Comments
 (0)