mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 13:01:01 +08:00
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:
@ -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) => {
|
||||||
|
Reference in New Issue
Block a user