From a000dd2c0b65be8ab5b2ad19f2748fbca13d5085 Mon Sep 17 00:00:00 2001
From: Mohamed Ben Makhlouf <med.b.makhlouf@gmail.com>
Date: Mon, 13 Nov 2023 20:43:21 +0100
Subject: [PATCH] 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 <benmakhlouf@softcatalyst.com>
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
---
 .../src/components/accordion-group/accordion-group.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx
index 6907e74569..eeb99b42fb 100644
--- a/core/src/components/accordion-group/accordion-group.tsx
+++ b/core/src/components/accordion-group/accordion-group.tsx
@@ -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();
   }
 
   /**