[Drawer] Support an explicit drag area inside scrollable Content
- 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
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