Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
4 of 7 tasks
indraraj26 opened this issue Jul 31, 2022 · 3 comments
Closed
4 of 7 tasks
Labels

Comments

@indraraj26
Copy link

indraraj26 commented Jul 31, 2022

Prerequisites

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

image

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

@ionitron-bot ionitron-bot bot added the triage label Jul 31, 2022
@liamdebeasi liamdebeasi self-assigned this Aug 1, 2022
@liamdebeasi
Copy link
Contributor

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?

@liamdebeasi liamdebeasi added the needs: reply the issue needs a response from the user label Aug 1, 2022
@ionitron-bot ionitron-bot bot removed the triage label Aug 1, 2022
@liamdebeasi liamdebeasi removed their assignment Aug 1, 2022
@indraraj26
Copy link
Author

Hi Liam,

event.stopPropagation() this works great.

Thank you.

@ionitron-bot ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Aug 1, 2022
@ionitron-bot
Copy link

ionitron-bot bot commented Aug 31, 2022

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.

@ionitron-bot ionitron-bot bot locked and limited conversation to collaborators Aug 31, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants