bug: React - IonModal - showBackdrop: false, backdropDismiss: false; no longer allows user to interact with background content.

[nextgen-jp]

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

IonModal Options:
showBackdrop: false,
backdropDismiss: false

Does not allow the user to interact with the background content as it did in 6.0.5 and prior.

Expected Behavior

Should allow the user to interact with the background content as it did in 6.0.5 and prior.

Steps to Reproduce

IonModal
present({
swipeToClose: false,
cssClass: "rounded",
showBackdrop: false,
backdropDismiss: false,
backdropBreakpoint: 1, //not necessary but added during testing
initialBreakpoint: 0.5,
breakpoints: [0, 0.5, 1],
onDidDismiss: handleDismiss,
});

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 6.0.8

Capacitor:

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

Utility:

cordova-res (update available: 0.15.4) : 0.15.3
native-run : 1.5.0

System:

NodeJS : v17.4.0 (/usr/local/Cellar/node/17.4.0/bin/node)
npm : 8.3.1
OS : macOS Big Sur

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/react@6.0.8-dev.1644969132.01e8dd1 @Ionic/react-router@6.0.8-dev.1644969132.01e8dd1

[nextgen-jp]

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

npm install @ionic/react@6.0.8-dev.1644969132.01e8dd1 @Ionic/react-router@6.0.8-dev.1644969132.01e8dd1

I'm not sure if this should be part of the Ionic React Core Features, but I used the cssClass to add pointer-events: none; to the ion-modal, and then added pointer-events:auto; to the first child div. This fixed the problem.

However, I can see where pointer-events, and the corresponding interactive modal css were taken out in 6.0.6:
core/src/components/modal/modal.scss

:host {
  ...
  pointer-events: none;
}

:host(.modal-interactive) .modal-wrapper,
:host(.modal-interactive) ion-backdrop {
  pointer-events: auto;
}

[nextgen-jp]

npm install @ionic/react@6.0.8-dev.1644969132.01e8dd1 @ionic/react-router@6.0.8-dev.1644969132.01e8dd1

This worked.

[liamdebeasi]

I merged in a fix for this via #24798 and the fix will be available in the next release of Ionic. Thanks!