You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
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.
Make sure the preview content is taller than the visible viewport so scrolling is required.
Drag the vertical divider between the form pane and the preview pane to make the preview wider (and the form narrower).
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
output.mov
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.
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 releasepointer-eventsonmouseup/pointerup. The overlay then sits invisibly on top of the preview iframe and intercepts wheel events; a subsequentclick triggers a re-render that finally removes it.
To Reproduce
CMS.registerPreviewTemplate(...)). I'm hitting this on three different page entries(home, about, a long policy page), so the issue is template-agnostic.
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
output.mov
Applicable Versions:
https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js)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 onmouseup/pointerup. The click that "fixes" it likely triggers a React re-render that removes or repaints the overlay. Worth looking at the resize-handlecomponent's drag-end cleanup.
Reproducibility: consistent — happens every time after any resize of the form/preview divider.