ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.01k stars 13.51k forks source link

bug: modal from ModalController opening twice #27629

Closed aleksander351 closed 1 year ago

aleksander351 commented 1 year ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

When I open a modal with the click of a button, the modal shows up twice. As you can see from the image, the <ion-app> element appears only once in the application. Some post suggested the problem is because there are multiple instances of <ion-app> on the page.

ion-modal-twice

Expected Behavior

Modal should show only one instance.

Steps to Reproduce

The code of the controler

async openPreviewModal(): Promise<void> {
    const previewModal1 = await this.modalCtrl.create({
      component: PreviewModalComponent,
      cssClass: "preview-modal",
    });

    previewModal1.present();
  }

Code Reproduction URL

No response

Ionic Info

   ionic info
   [WARN] Error loading @ionic/angular package.json: Error
   [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package' is not
   defined by "exports" in
   E:\xxxxxxx\node_modules\@ionic\angular\package.json

   Ionic:

   Ionic CLI                     : 6.12.3 (C:\Users\alex\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : not installed
   @angular-devkit/build-angular : 15.2.8
   @angular-devkit/schematics    : 15.2.8
   @angular/cli                  : 15.2.8
   @ionic/angular-toolkit        : 9.0.0

   Capacitor:

   Capacitor CLI   : 2.4.5
   @capacitor/core : 2.4.5

   Utility:

   cordova-res : not installed
   native-run  : not installed

   System:

   NodeJS : v16.18.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.11.3
   OS     : Windows 10

Additional Information

No response

ionitron-bot[bot] commented 1 year ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

aleksander351 commented 1 year ago

turned out it was a problem with swiper.js

adding (click)="$event.preventDefault(); solved it for me.

ionitron-bot[bot] commented 1 year ago

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.