mui / mui/base-ui

[Drawer] Support an explicit drag area inside scrollable Content

Open
#5,649 0 comments 0 reactions 0 assignees View on GitHub
component: drawer status: waiting for maintainer
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

I’d like a fixed header inside `Drawer.Content` to control the Drawer with mouse and touch, while the list scrolls underneath it.

### ✅ With an explicit drag area

**[Open solution in StackBlitz ↗](https://stackblitz.com/github/radist2s/base-ui-drawer-fixed-header-repro/tree/drag-area-poc)**

The whole header can expand, collapse and dismiss the Drawer, even after scrolling the list. Buttons still work.

https://github.com/user-attachments/assets/10ef2afd-a6b4-4f2c-8e11-3b994ca1e56b

### ❌ Current behavior

**[Open reproduction in StackBlitz ↗](https://stackblitz.com/github/radist2s/base-ui-drawer-fixed-header-repro/tree/reproduction)**

Unfortunately, the same header gestures are blocked without the patch.

https://github.com/user-attachments/assets/6fadb01b-f5e1-4bf7-811a-ef1e080a33e1

Keeping the header inside the scroll container enables the scroll-linked background and blur shown above. The PoC uses a provisional attribute to mark the drag area:

```jsx


{/* Handle, title, Back and Add */}

```

Could this become a supported API, perhaps `Drawer.DragArea`?

If there’s interest from the maintainers, I’m ready to turn this PoC into a PR following the project’s contribution guidelines, with regression tests and any API adjustments you’d prefer.

**Try it:** [Solution](https://stackblitz.com/github/radist2s/base-ui-drawer-fixed-header-repro/tree/drag-area-poc) · [Without the patch](https://stackblitz.com/github/radist2s/base-ui-drawer-fixed-header-repro/tree/reproduction) · [Source and patch](https://github.com/radist2s/base-ui-drawer-fixed-header-repro/tree/drag-area-poc)

Related discussions: [independently draggable header (#38)](https://github.com/mui/base-ui/issues/38#issuecomment-2973725073) · [mouse/pen swipe behavior inside Content (#5286)](https://github.com/mui/base-ui/issues/5286#issuecomment-5028513962).

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and solution, then inspect Drawer.Content and the project’s contribution guidelines. The work is done when a supported drag-area API lets a fixed header control the Drawer during mouse and touch interactions while the list scrolls underneath, buttons still work, and regression tests cover the behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.