bug: modal, popover dismiss when ion-select is dismissed

[petrot]

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

Current Behavior

I have a modal page with some inputs and drop-downs (ion-selects). When I click to the OK button after selecting an option, the click triggers the modal dismiss.

I could catch the event on the event listener:

const modal = await this._modalCtrl.create({
  component: RecordEditPage,
 ...
});
 
modal.onDidDismiss().then(() => {
  console.error('dismissed'); // I see it on the console
});

await modal.present();

When I set the canDismiss property to false, the modal works as expected, but I can't close it through this._modalCtrl.dismiss();

Expected Behavior

Don't close the modal on ion-select changes.

Steps to Reproduce

Create a component with some ion-select input. Open the modal with the modalController.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.19.0
Ionic Framework : @ionic/angular 6.1.0
@angular-devkit/build-angular : 13.3.2
@angular-devkit/schematics : 13.3.2
@angular/cli : 13.3.2
@ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.4.3
@capacitor/android : 3.4.3
@capacitor/core : 3.4.3
@capacitor/ios : 3.4.3

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

NodeJS : v14.17.0
npm : 8.6.0
OS : macOS Monterey

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Can you try the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected]

Note: This dev build applies to all Ionic packages, not just @ionic/angular.

[petrot]

@liamdebeasi thanks for the quick answer! Yes, the linked dev version works perfectly!

[mattsteve]

Please make the same fix for @ionic/vue

[liamdebeasi]

The dev build applies to all of our Ionic packages. I used Angular as an example because that was what the issue author was using.

npm install @ionic/[email protected] @ionic/[email protected]

[petrot]

Thank you guys, you're awesome!

[StarleyDev]

I've returned for version 6.0.16 but the same error!

[liamdebeasi]

We don't recommend using dev builds in production. The dev build is to help unblock development of applications.

If this issue is impacting a production app, we recommend rolling back the app to 6.0.16 until an update goes live.

[vicb]

Here is a repro on JS ionic https://codepen.io/vicb-the-lessful/pen/yLpRjwx

Can't wait for the fix and thanks for reacting quickly !

[aliharakeh]

I also had this issue. A quick workaroud is to add (ionDismiss)="$event.stopPropagation()" to ion-select

[liamdebeasi]

Thanks for the issue. This has been resolved via #25125, and a fix will be available in an upcoming release of Ionic Framework.

[liamdebeasi]

A fix for this has been released in Ionic v6.1.1.

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