Skip to content

Commit ce1f005

Browse files
kostyafarberclaude
andauthored
fix(context-menu): prevent right-click release from selecting menu items (tldraw#8499)
When right-clicking to open a context menu and moving the mouse quickly, the `pointerup` (button 2) from the right-click can land on a menu item and trigger selection without the user intending to click it. Closes tldraw#8480 **Root cause:** Radix's `MenuItem` calls `event.currentTarget.click()` on `pointerup` when `isPointerDownRef` is false (i.e. the pointer wasn't pressed down on that item). This is intentional for drag-to-select behavior, but it doesn't check the pointer button — so a right-click release (button 2) triggers the same path as a left-click release. **Fix:** Add an `onPointerUp` handler to `_ContextMenu.Item` that calls `preventDefault()` for non-left-click buttons. Radix's `composeEventHandlers` runs the user handler first and skips its internal handler when `defaultPrevented` is true, so the synthetic `click()` never fires. ### Change type - [x] `bugfix` ### Test plan 1. Right-click on empty canvas — context menu appears 2. Move mouse quickly across menu items — no item should activate 3. Right-click on a shape, move fast across items — no item should activate 4. Left-click a menu item normally — should still work 5. Drag from outside the menu onto an item and release (left button) — should still select - [ ] Unit tests - [ ] End to end tests ### Release notes - Fix context menu items being accidentally selected when right-clicking and quickly moving the mouse. ### Code changes | Section | LOC change | | ---------- | ---------- | | Core code | +9 / -0 | Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent f9d0210 commit ce1f005

1 file changed

Lines changed: 9 additions & 0 deletions

File tree

packages/tldraw/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,15 @@ export function TldrawUiMenuItem<
149149
draggable={false}
150150
className="tlui-button tlui-button__menu"
151151
data-testid={`${sourceId}.${id}`}
152+
onPointerUp={(e) => {
153+
// Prevent right-click pointerup from triggering item selection.
154+
// Radix calls click() on pointerup when the pointer wasn't pressed
155+
// on the item, but doesn't check the button — so a right-click
156+
// release while moving across the menu selects the item under the cursor.
157+
if (e.button !== 0) {
158+
preventDefault(e)
159+
}
160+
}}
152161
onSelect={(e) => {
153162
if (noClose) preventDefault(e)
154163
if (disableClicks) {

0 commit comments

Comments
 (0)