Preview pane stops accepting scroll events after resizing the form/preview divider
- Dominant language
- JavaScript
- Stars
- 19.4k
- Forks
- 3.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 9
Description
**Describe the bug**
After dragging the divider between the form pane and the preview pane to resize them, the preview pane stops responding to scroll-wheel events. The
form pane continues to scroll normally throughout — the issue is isolated to the preview side. Scrolling resumes only after clicking somewhere in the
Decap UI (the form pane, the preview itself, or any toolbar control), at which point preview scrolling works again until the next resize.
The behavior is consistent with a transparent drag-resize overlay (`pointer-events: auto`, captures mouse events during the drag) failing to release
`pointer-events` on `mouseup` / `pointerup`. The overlay then sits invisibly on top of the preview iframe and intercepts wheel events; a subsequent
click triggers a re-render that finally removes it.
**To Reproduce**
1. Open any entry with a custom-registered preview template (`CMS.registerPreviewTemplate(...)`). I'm hitting this on three different page entries
(home, about, a long policy page), so the issue is template-agnostic.
2. Make sure the preview content is taller than the visible viewport so scrolling is required.
3. Drag the vertical divider between the form pane and the preview pane to make the preview wider (and the form narrower).
4. Without clicking anywhere else, hover the cursor over the preview pane and try to scroll with the mouse wheel / trackpad.
Result: scroll-wheel events on the preview pane are ignored. Click anywhere in the Decap UI; preview scrolling resumes until the next resize.
**Expected behavior**
The preview pane scrolls normally after a resize. The resize gesture should not affect scroll behavior on either pane.
**Screenshots**
https://github.com/user-attachments/assets/3617a1a8-47b1-48ae-bc9e-de35f973422f
**Applicable Versions:**
- Decap CMS version: 3.x (loaded from `https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js`)
- Git provider: GitHub (editorial workflow enabled)
- OS: MacOS, 26.0.1 (build 25A362)
- Browser version: Google Chrome 147.0.7727.138
- Node.JS version: v22.16.0
**CMS configuration**
**Additional context**
A drag-handle overlay element used during the resize gesture appears not to have its `pointer-events` (or its DOM presence) restored on `mouseup` /
`pointerup`. The click that "fixes" it likely triggers a React re-render that removes or repaints the overlay. Worth looking at the resize-handle
component's drag-end cleanup.
Reproducibility: consistent — happens every time after any resize of the form/preview divider.
Contributor guide
Assessment
This issue has not been assessed yet.