bug: click listener inside ion-radio-group ion-item trigger ionChange

[indraraj26]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

When you click inside the ion-item of ion-radio-group will trigger ionChange. It is due to ion-input inside ion-radio-group, I do not know whether it is expected behavior.

html:

  <ion-radio-group (ionChange)="onRadioValueChanged($event)">
      <ion-item class="item-desc">
        <ion-radio slot="start" mode="md" [value]="'test'"></ion-radio>
        <ion-row class="ion-align-items-center">
          <ion-col size="12">
           zyz
          </ion-col>
          <ion-col size="12">
         <!--    <ion-item lines="none"> -->
              <ion-button size="small" color="primary"
                (click)="onIncreaseValue($event)">
                <ion-icon name="remove"></ion-icon>
              </ion-button>
              <ion-input type="number" [value]="test" readonly></ion-input>
              <ion-button  size="small" color="primary"
                (click)="onIncreaseValue($event)">
                <ion-icon slot="icon-only" name="add"></ion-icon>
              </ion-button>
           <!--  </ion-item> -->
          </ion-col>
        </ion-row>
        <ion-text slot="end" color="dark">Henlo</ion-text>
      </ion-item>
  </ion-radio-group>

ts:

  test = 1;
  onRadioValueChanged(event: any) {
    console.log('radio trigger');
  }


  onIncreaseValue(event: any) {
    event.preventDefault();
    event.stopPropagation();
    console.log('on increase value');
    this.test += 1;
  }

Expected Behavior

It should not trigger ionChange

Steps to Reproduce

Git branch: ion-radio-propagation

1. npm i && ionic serve
2. click on plus and minus button
3. you will see two logs

Code Reproduction URL

https://github.com/indraraj26/storage-boolean-issue/tree/ion-radio-propagation

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (C:\Users\user\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.1.3
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.0
@capacitor/android : 3.6.0
@capacitor/core : 3.6.0
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v14.17.1 (C:\Program Files\nodejs\node.exe)
npm : 6.14.13
OS : Windows 10

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Things seem to be working as intended here. Inside of ion-radio-group you have an ion-input. When the plus or minus buttons are clicked, the value property on ion-input changes. This causes ion-input to dispatch an ionChange event. That event then bubbles up to the ion-radio-group, causing the onRadioValueChanged handler to fire.

In terms of fixing this, you have a couple options:

1. Move the ion-input outside of ion-radio-group.
2. Add an ionChange listener on ion-input where you call event.stopPropagation() to prevent the event from bubbling.

Can you try either of those and let me know if it resolves the issue?

[indraraj26]

Hi Liam,

event.stopPropagation() this works great.

Thank you.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.