Skip to content

Preview pane stops accepting scroll events after resizing the form/preview divider #7800

@blolt

Description

@blolt

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

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.

Metadata

Metadata

Assignees

No one assigned

    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