bug: sheet style modal with backdropBreakpoint dismisses on backdrop

[EinfachHans]

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 Sheet style Modal with [breakpoints]="[0.3, 0.7]", [initialBreakpoint]="0.3" and [backdropBreakpoint]="0.3". When i expand the Sheet to the upper breakpoint and then tap on the backdrop the Modal completly dismisses.

Expected Behavior

I would expect the Sheet Modal to move to the lowest defined Breakpoint and only dismiss if this is 0.

Steps to Reproduce

See above 😊

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (/Users/hans/.nvm/versions/node/v16.13.1/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 6.0.4
@angular-devkit/build-angular : 13.2.0
@angular-devkit/schematics : 13.2.0
@angular/cli : 13.2.0
@ionic/angular-toolkit : 5.0.3

Capacitor:

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

Cordova:

Cordova CLI : 10.0.0 (cordova-lib@10.1.0)
Cordova Platforms : not available
Cordova Plugins : not available

Utility:

cordova-res : 0.15.4
native-run : 1.5.0

System:

Android SDK Tools : 25.2.3 (/Users/hans/Library/Android/sdk)
ios-deploy : 1.10.0
NodeJS : v16.13.1 (/Users/hans/.nvm/versions/node/v16.13.1/bin/node)
npm : 8.4.0
OS : macOS Monterey
Xcode : Xcode 13.2.1 Build version 13C100

Additional Information

No response

[liamdebeasi]

Thanks for the issue. Dismissing the modal when tapping an enabled backdrop is the intended behavior. Do you have an example of a non-Ionic app that moves the sheet to a lower breakpoint when the backdrop is tapped?

[EinfachHans]

Some sheet style modals should never be dismissed, eg if no zero breakpoint exists.

If i have a look at the iOS Maps one, it moves to the lowest breakpoint if its in the middle and you move the screen or it's at the top and you tap the handle. Because it never has a clickable backdrop it's hard to say but in my opionon this is the logical consequence 🤔

[liamdebeasi]

The Ionic equivalent of this behavior would be backdropDismiss: false. If you go into Safari and tap the share icon, this brings up a sheet modal. Tapping the backdrop dismisses the modal.

It should be possible to get both behaviors by using backdropDismiss. Does that work for your use case?

[EinfachHans]

That's right, but this is not one of the "always there" modals like in ios maps. Setting backdropDismiss: false is okay so far, but it would be great to maybe have a handler here to add my own logic - in this case: Move to lowest breakpoint (would depend on #24648)

[liamdebeasi]

Are you requesting that backdropDismiss default to false when there is no 0 breakpoint?

[EinfachHans]

Mhh not really, the initial request was that if there is no 0 Breakpoint, the Sheet should move to lowest Breakpoint on Backdrop click.

I think there are three Solutions:

• Default behaviour
• New Property sheetBackdropLogic (bad name^^) which could be for example dismiss or moveToLowest
• A onBackdropClick Event where i can add my own logic

[liamdebeasi]

With the backdrop click handler, would you expect to be able to prevent the modal from dismissing and instead perform some custom logic?

[liamdebeasi]

Going back to the Apple Maps example you mentioned, why do your breakpoints have to be [0.3, 0.7]? In that case, about 30% of the modal is never displayed.

The breakpoint equivalent for the Apple Maps behavior would be something like [0.3, 1] which might work better.

[EinfachHans]

Yeah we have [0.3, 0.7, 1], i just forget to mention the last 1 here, so we are talking about the 0.7 in that case.

For our usecase i would not expect to prevent the modal dismissing here, guess thats more a topic of #22297 - in our use case i would set backdropDismiss: false and add my own handler to move the breakpoint to the lowest one

[liamdebeasi]

Thanks for the additional information. I discussed this with the team, and we do not feel this feature is a good fit for Ionic.

Our primary concern is this feature would redefine the behavior of the backdrop, which has typically been to dismiss the modal. We feel that this change would cause inconsistency and lead to a confusing UX.

As for the Apple Maps use case provided in, we think that could be solved by #23917. This is a feature we are interested in adding to Ionic.

I am going to close this issue. Thanks!

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