From 73b8bfde3f060490958c10f58d0f68de80cb957f Mon Sep 17 00:00:00 2001
From: Maria Hutt <thetaPC@users.noreply.github.com>
Date: Fri, 10 Nov 2023 14:12:08 -0800
Subject: [PATCH] fix(radio-group): emit value change on componentDidLoad
 (#28488)

Issue number: resolves #28356

---------

<!-- 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-radio-group` would not set the radio value when using it as a
Angular standalone component and data binding:

```html
<ion-radio-group [value]="fromValue">
  <ion-radio value="dogs">Dogs</ion-radio><br />
  <ion-radio value="cats">Cats</ion-radio><br />
  <ion-radio value="turtles">Turtles</ion-radio><br />
  <ion-radio value="fish">Fish</ion-radio><br />
</ion-radio-group>
```

This is happening because the value is set before the [value
watcher](https://github.com/ionic-team/ionic-framework/blob/c5dd622bbe353f4d43752ede702f60385160d5fc/core/src/components/radio-group/radio-group.tsx#L34)
has been configured. The event, `ionValueChange`, does not get
[dispatched](https://github.com/ionic-team/ionic-framework/blob/c5dd622bbe353f4d43752ede702f60385160d5fc/core/src/components/radio-group/radio-group.tsx#L37).

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

Run `valueChanged()` in `componentDidLoad()`.
- `valueChanged()` function is tied to the [value
watcher](https://github.com/ionic-team/ionic-framework/blob/c5dd622bbe353f4d43752ede702f60385160d5fc/core/src/components/radio-group/radio-group.tsx#L34)
so it will
[dispatch](https://github.com/ionic-team/ionic-framework/blob/c5dd622bbe353f4d43752ede702f60385160d5fc/core/src/components/radio-group/radio-group.tsx#L37)
the `ionValueChange`.

## 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. -->

In our testing, we observed that the issue described below only occurs
when assigning a value to the radio group within the primary content,
such as rendering within the app component template.

When the template is isolated to a route, the value is assigned
correctly. To address this issue, we need to ensure that the watcher is
called after the component has finished loading, allowing the emit to be
dispatched correctly.

Dev build: 7.5.4-dev.11699404450.136700d7
---
 core/src/components/radio-group/radio-group.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/core/src/components/radio-group/radio-group.tsx b/core/src/components/radio-group/radio-group.tsx
index 9a61befae3..365a34baad 100644
--- a/core/src/components/radio-group/radio-group.tsx
+++ b/core/src/components/radio-group/radio-group.tsx
@@ -52,7 +52,16 @@ export class RadioGroup implements ComponentInterface {
   @Event() ionValueChange!: EventEmitter<RadioGroupChangeEventDetail>;
 
   componentDidLoad() {
-    this.setRadioTabindex(this.value);
+    /**
+     * There's an issue when assigning a value to the radio group
+     * within the Angular primary content (rendering within the
+     * app component template). When the template is isolated to a route,
+     * the value is assigned correctly.
+     * To address this issue, we need to ensure that the watcher is
+     * called after the component has finished loading,
+     * allowing the emit to be dispatched correctly.
+     */
+    this.valueChanged(this.value);
   }
 
   private setRadioTabindex = (value: any | undefined) => {