Skip to content

Drawer scrollable content conflicts with drawer swipe/drag gestures #798

@Capyhw

Description

@Capyhw

Title

Drawer scrollable content conflicts with drawer swipe/drag gestures

Body

Description

In the Drawer Scrollable content example from the docs:

https://coss.com/ui/docs/components/drawer#scrollable-content

the scrollable content area appears to conflict with the Drawer swipe/drag gesture. When trying to drag the scrollbar/
thumb or scroll inside the drawer content, the drawer drag/dismiss gesture can take over, making the scrollbar
difficult or impossible to drag reliably.

Steps to reproduce

  1. Open the Drawer docs page:
    https://coss.com/ui/docs/components/drawer#scrollable-content
  2. Open the "Scrollable content" drawer example.
  3. Try to drag the scrollbar/thumb inside the drawer content area.
  4. Also try scrolling near the scroll boundary.

Actual behavior

The drawer's drag/swipe behavior competes with the scrollable area. In some cases, dragging the scrollbar or scroll
area moves/dismisses the drawer instead of scrolling the content.

Expected behavior

Scrollable content inside DrawerPanel should take priority over drawer drag gestures. Users should be able to drag
the scrollbar/thumb and scroll the content without accidentally dragging or dismissing the drawer.

Possible solutions

  • Provide a public prop to disable drawer swipe dismissal, for example:

    <Drawer disableSwipeDismissal>
      ...
    </Drawer>
  • Or make DrawerPanel / ScrollArea stop drawer swipe handling while the user is interacting with scrollable content.

  • Or ignore drawer swipe gestures that originate from the scrollbar/thumb or scrollable viewport.

Context

This is especially noticeable when using DrawerPanel for long lists or settings panels where scrolling is the primary
interaction. The current behavior makes scrollable drawers hard to use on touch devices and with custom scrollbars.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions