Skip to content

Fix #69: dismiss More-options menu when the user starts dragging a row#70

Open
lucasmendes-design wants to merge 1 commit into
trunkfrom
lucasmdo/customize-menu-dismiss-on-drag
Open

Fix #69: dismiss More-options menu when the user starts dragging a row#70
lucasmendes-design wants to merge 1 commit into
trunkfrom
lucasmdo/customize-menu-dismiss-on-drag

Conversation

@lucasmendes-design
Copy link
Copy Markdown
Collaborator

Fixes #69. Linear: DES-660. Off trunk directly — no stack dependencies.

Summary

The More-options (three-dot) menu in customize mode stayed open while the user dragged a row, because move-menu.js only listened on click to dismiss. A press-and-hold drag never produces a click — by the time pointerup fires the row has already moved, and the floating menu remains anchored at its position: fixed coordinates next to whatever now sits in the original spot.

The fix

One file, src/customizer/move-menu.js. New onPointerDown handler that closes the open menu whenever a pointerdown lands outside the menu and outside the three-dot trigger. Registered with capture: true so it fires before drag-drop.js's own pointerdown handler on the sidebar — the menu closes first, then the drag starts cleanly.

function onPointerDown( ev ) {
    if ( ! openMenu ) return;
    if ( ! ( ev.target instanceof Element ) ) return;
    if ( ev.target.closest( '.' + MENU_CLASS ) || ev.target.closest( '.' + TRIGGER_CLASS ) ) {
        return;
    }
    closeMenu();
}

Paired with the existing click and keydown handlers so all dismissal paths are covered (click outside, drag start, Escape, menu-action click).

Manual verification

Local Studio site (PHP 8.4 / WP 6.9.4, SQLite) with the blueprint plugin set, in customize mode.

  • Before: open the three-dot menu on Products → press-and-hold on another row to drag → menu stays open, anchored next to wherever Products used to be.
  • After: open the three-dot menu → start dragging → menu dismisses the instant the pointer goes down.
  • Re-verified existing dismissal paths don't regress:
    • Click outside the menu (and outside any trigger) → closes (the existing click handler).
    • Click a menu action (Move up / Move down / Move to plugins / Reset to default) → closes (already worked, still works).
    • Press Escape → closes (existing keydown handler).
    • Click the three-dot trigger while open → toggles closed (existing click handler).

Tests

JS-only behaviour. No existing test covers the cross-module pointerdown ordering (it's an integration concern between move-menu.js and drag-drop.js), so this PR doesn't add one. CI gates the rest of the suite.

🤖 Generated with Claude Code

The `click`-phase handler in move-menu.js only fires on a full click —
by then a press-and-hold drag has already taken hold of a row, so the
floating menu stays anchored at its `position: fixed` coordinates
while the row moves out from under it.

Add a `pointerdown` listener in the capture phase that closes the
open menu whenever the pointerdown lands outside the menu and the
three-dot trigger. Registered in capture so it fires before
drag-drop.js's own `pointerdown` handler on the sidebar — menu closes
first, then the drag starts cleanly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pending: Calypso-parity Not yet implemented on the Calypso side.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Customize mode: More-options menu stays open when the user starts dragging an item

2 participants