Configurable Overlay Behavior for BottomSheet (Collapse or Disable Dismissal)

[architpoddar-if]

Description

Currently, clicking on the overlay of a BottomSheet dismisses it entirely. However, in some use cases, it would be beneficial to have more control over this behavior.

Specifically, I would like to request the ability to configure the overlay click behavior such that:

1. Collapse Instead of Dismiss: Clicking on the overlay collapses the BottomSheet, ie, the state is changed to Collapsed instead of hidden.

2. Disable Overlay Interaction: Clicking on the overlay has no effect, keeping the BottomSheet in its current state.

Public API Changes

1. Introduce a new Enum:

public enum OverlayClickBehavior {
Dismiss,
Collapse,
None
}

2. New Bindable Property in BottomSheet Configuration:

public OverlayClickBehavior OverlayClickBehavior { get; set; }

Intended Use-Case

This feature is useful in situations where dismissing the BottomSheet entirely would:

1. Interrupt critical workflows or ongoing interactions within the BottomSheet.
2. Negatively impact multi-step workflows where collapsing is preferred over dismissal.

Example Scenario: Feedback Form in a Mobile App
A mobile app includes a BottomSheet that serves as a feedback form. The BottomSheet has multiple fields (e.g., name, email, feedback message) that users fill out and submit.

Why Collapsing Matters:
If the user accidentally taps outside the BottomSheet, dismissing it completely would result in losing all the entered information. This is frustrating for users and disrupts the experience. Allowing the BottomSheet to collapse instead ensures the form stays accessible, and the user can continue filling it out without data loss.

Why Disabling the Overlay Matters:
In scenarios where the feedback form is critical and must be completed, ignoring overlay clicks ensures that the BottomSheet remains persistent until the user explicitly closes or submits the form.

[naveenkumar-sanjeevirayan]

Hi architpoddar-if,

Thank you for sharing your valuable feedback and feature requests for the BottomSheet control.

We have reviewed your suggestions regarding the overlay click behavior and are pleased to inform you that we have considered both requested features:
Collapse Instead of Dismiss: The option for the BottomSheet to collapse instead of fully dismissing when the overlay is clicked.
Disable Overlay Interaction: The option to disable the overlay click interaction entirely, keeping the BottomSheet in its current state.
We will introduce these features in any of the upcoming Syncfusion Maui-Toolkit releases.

Regards,
Naveenkumar S

[malsabi]

Hello @naveenkumar-sanjeevirayan

Is it possible to have an option were we can control if clicking on the overlay to fully dismiss or collapse?
When the overlay interaction is disabled, does it mean I can still move the bottom sheet to any state?
Is it possible to make the bottom sheet close directly when it goes to collapse state by creating a Boolean property to support this feature.

Thanks

[naveenkumar-sanjeevirayan]

Hi Malsabi,

Thanks for contacting Syncfusion support. We have reviewed your queries.

Query 1: Is it possible to have an option where we can control if clicking on the overlay to fully dismiss or collapse?
We have considered your request for the bottom sheet to transition to a collapsed or hidden state when clicking on the overlay. Pleased to inform you that we have considered it as the requested feature. We will introduce this feature in any of the upcoming Syncfusion Maui-Toolkit releases.

Query 2: When the overlay interaction is disabled, does it mean I can still move the bottom sheet to any state?
When overlay interaction is disabled, the BottomSheet control can still change states through a swipe initiated directly on the bottom sheet. Disabling overlay interaction does not prevent state changes via swipe gestures.

Query 3: Is it possible to make the bottom sheet close directly when it goes to a collapsed state by creating a Boolean property to support this feature?
We recommend a workaround to automatically close the bottom sheet when it transitions to the collapsed state. This can be achieved by using the state-changed event to change its state from collapsed to hidden. If you wish to adjust the collapsed height to suit your requirements, the bottom sheet will automatically close once it reaches the specified collapsed height.

Xaml:

<bottomSheet:SfBottomSheet x:Name="bottomSheet" StateChanged="OnStateChanged" CollapsedHeight="50"></bottomSheet:SfBottomSheet>

C#:

private void OnStateChanged(object sender, StateChangedEventArgs e)
{
	 if (e.NewState == BottomSheetState.Collapsed)
	 {
		 bottomSheet.State = BottomSheetState.Hidden;
	 }
}

Regards,
Naveenkumar S

[malsabi]

@naveenkumar-sanjeevirayan
Thank you so much, this is exactly what I needed to know.

[architpoddar-if]

Hi @naveenkumar-sanjeevirayan! Thank you for considering my feature request and for your response earlier. I appreciate the effort the team is putting into improving the BottomSheet control.

I wanted to check if there are any updates on the implementation of this feature. Is it planned for an upcoming release, or is there an estimated timeline for when it might be available?

Looking forward to your response. Thanks again for your time and support!

[naveenkumar-sanjeevirayan]

Hi @architpoddar-if

We’re pleased to announce that the CollapseOnOverlayTap support for the BottomSheet control has been released in our latest .NET MAUI Toolkit update, version 1.0.4.

For more details, please refer to the below help documentation:
https://help.syncfusion.com/maui-toolkit/bottom-sheet/bottomsheet-customization#overlay-tap-to-collapse

Thanks,

[architpoddar-if]

Thank you @naveenkumar-sanjeevirayan for listening to feedback and implementing it. Much appreciated.