How to Prevent Dialog from Closing When Sliding Sideways

Read the original article：How to Prevent Dialog from Closing When Sliding Sideways

Problem Description

In HarmonyOS, when using a CustomDialogController to display a custom dialog, the dialog closes unexpectedly when the user performs a sideways sliding gesture (a horizontal swipe).

This behavior is similar to the default behavior of Android dialogs, where a swipe in any direction (especially left or right) dismisses the dialog.

However, in certain use cases, you might want the dialog to remain open during such gestures.

For example, if your dialog contains content that the user might interact with via horizontal swipes (like a carousel or a horizontal scroll), the dialog should not close.

Background Knowledge

• CustomDialogController manages custom dialog lifecycle in HarmonyOS
• Dialogs have default dismissal behaviors for gestures like back presses or swipes
• The onWillDismiss callback intercepts dismissal attempts
• Return value controls whether dismissal is allowed (true = close, false = remain open)

Troubleshooting Process

1.Reproduce the Issue:

• Initialize a basic CustomDialogController:
  

   private dialogController: CustomDialogController = new CustomDialogController({
     builder: CustomDialogContent(), // Your dialog component
     cancelable: true // Allows tap-to-close
   });
  

• Observed Behavior: Swiping left/right closes the dialog.

2.Identify Gesture Handling:

• Tested swipe directions: Left, Right, Up, Down.
• All swipe gestures trigger dismissal.
• Confirm Dialogs use platform-consistent swipe-to-dismiss.

3.Isolate the Control Point:

• Reviewed CustomDialogControllerparameters:
  • cancelable: Controls tap/back-button dismissal.
  • onWillDismiss: Only way to intercept swipe gestures.

Analysis Conclusion

By strategically overriding onWillDismiss to return false, you disable the platform's default swipe-dismiss behavior while preserving other dismissal mechanisms.

This approach resolves the core conflict between system gestures and custom dialog interactions, ensuring a seamless user experience for horizontally interactive dialogs.

Solution

Override the dismissal behavior in your CustomDialogController constructor:

customDialogController: CustomDialogController = new CustomDialogController({
  builder: YourCustomDialogComponent(),
  onWillDismiss: () => {
    return false; // Blocks all gesture-triggered dismissal
  }
});

Verification Result

Issue resolved and verified.

Written by Dogan Evci