Skip to content

ModalBottomSheet dismisses when dragging wheel picker reaches end of list #17

@haykarustamyan

Description

@haykarustamyan

Problem
When dragging the wheel picker and reaching the end of the list, continuing to drag causes the ModalBottomSheet to dismiss unintentionally. This is a gesture conflict: the wheel picker's drag gestures are captured by the library's ModalBottomSheet when the wheel can't scroll further.

Steps to Reproduce

  1. Open WheelDatePickerView in a ModalBottomSheet
  2. Drag the wheel picker (e.g., year/month/day) vertically
  3. Continue dragging past the end of the list (when it can't scroll further)
  4. The ModalBottomSheet dismisses unexpectedly

Expected Behavior

  • The ModalBottomSheet should not dismiss when the user is interacting with the wheel picker
  • Drag-to-dismiss should only work from the top drag handle area (if dragHandle is provided)
  • The wheel picker should handle its own drag gestures without triggering sheet dismissal

Actual Behavior

  • The ModalBottomSheet dismisses when dragging the wheel picker reaches the end
  • The entire sheet responds to drag gestures, not just the dragHandle area
  • The dragHandle parameter appears to be only visual and doesn't restrict dragging

Code Example - Platform: Android/iOS (KMP)
WheelDatePickerView(
showDatePicker = true,
dragHandle = {
Box(
modifier = Modifier
.fillMaxWidth()
.height(36.dp)
) {
// Drag handle - should be the only draggable area
}
},
// ... other parameters
)

Proposed Solutions

  1. Support disabling drag-to-dismiss: Add a parameter (e.g., sheetGesturesEnabled: Boolean = true) to disable drag-to-dismiss when needed
  2. Handle gesture conflicts: Detect when the wheel picker is actively being dragged and prevent the ModalBottomSheet from capturing those gestures
  3. Restrict drag-to-dismiss to dragHandle: Make the dragHandle parameter actually restrict dragging to only that area, not just visual
  4. Provide picker content without ModalBottomSheet: Add a dateTimePickerView parameter or similar to get just the picker content without the ModalBottomSheet wrapper, allowing developers to wrap it in their own ModalBottomSheet with custom behavior

Additional Context
This cannot be fixed from outside the library because:

  • We cannot control the library's ModalBottomSheet drag behavior
  • We cannot intercept gestures before they reach the library's ModalBottomSheet
  • The dragHandle parameter is only visual and doesn't restrict dragging
    This is a common UX issue that affects user experience when interacting with the date picker.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions