question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bug: modal doesn't dismiss when backdrop is clicked on IOS

See original GitHub issue

Bug Report

Ionic version:

[x] 5.x

Current behavior:

On IOS, ion-modal does not dismiss when backdrop is clicked even though backdropDismiss is set to true.

Expected behavior:

ion-modal should dismiss when backdropDismiss is set to true.

Steps to reproduce:

Open a modal which has backdropDismiss set to true and click the backdrop.

Related code:

Template

    const modal = await this.modalController.create({
      component: ItemModalPage,
      cssClass: 'item-modal',
      backdropDismiss: true,
      showBackdrop: true,
      animated: true,
      componentProps: {
        item: item,
      },
    });

CSS

.item-modal .modal-wrapper {
  top: 40%;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  display: block;
  border-radius: 2px;
  min-width: 100%;

}

Other information:

As mentioned above, this only seems to happen on IOS

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.13 (/Users/chris/.nvm/versions/node/v12.9.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.1000.0-next.3
   @angular-devkit/schematics    : 10.0.0-next.3
   @angular/cli                  : 9.1.4
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 7 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 1.0.0

System:

   Android SDK Tools : 26.1.1 (/Users/chris/Library/Android/sdk/)
   NodeJS            : v12.9.0 (/Users/chris/.nvm/versions/node/v12.9.0/bin/node)
   npm               : 6.14.4
   OS                : macOS Catalina

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
chris-cornwallcommented, May 11, 2020

Sorry for that and thanks very much for the solution!

0reactions
ionitron-bot[bot]commented, Jun 10, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot dismiss a modal by clicking the backdrop (ionic 6)
In the inspector, I can solve this issue by adding display: none to the element above. However, in practice this wont work because...
Read more >
Ionic 2: Modal doesn't close when clicking on backdrop
I want the modal to close when I click on the backdrop which I think is expected behavior. However, nothing happens when clicking...
Read more >
JavaScript · Bootstrap
modal -backdrop to provide a click area for dismissing shown modals when clicking outside the modal. Via data attributes. Activate a modal without...
Read more >
iOS 14 (SwiftUI) Sheet Modals not … | Apple Developer Forums
Sometimes a modal is automatically (non-desired) closed right after it opens, and after that, the modal works fine (and so it is not...
Read more >
10 Most Common Bootstrap Mistakes That Developers Make
We have specified that the modal won't close when user clicks outside the modal by using the data-backdrop option, and we have disabled...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found