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](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L34))
has been configured. The event, `ionValueChange`, does not get
[dispatched](c5dd622bbe/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](c5dd622bbe/core/src/components/radio-group/radio-group.tsx (L34))
so it will
[dispatch](c5dd622bbe/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
This commit is contained in:
Maria Hutt
2023-11-10 14:12:08 -08:00
committed by GitHub
parent f0a5d2704c
commit 73b8bfde3f

View File

@ -52,7 +52,16 @@ export class RadioGroup implements ComponentInterface {
@Event() ionValueChange!: EventEmitter<RadioGroupChangeEventDetail>; @Event() ionValueChange!: EventEmitter<RadioGroupChangeEventDetail>;
componentDidLoad() { 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) => { private setRadioTabindex = (value: any | undefined) => {