fix(context-menu): keep menu open after long-press release on touch (tldraw#8741)

In order to make the long-press context menu usable on touch devices,
this PR fixes a bug where the menu opened on iOS but closed the moment
the user lifted their finger (tldraw#8740).

Radix's `ContextMenu` Trigger has its own 700ms touch long-press
detection that is independent of tldraw's `long_press` event. When that
timer fires, the menu opens while the same touch is still down. The
pointerup that follows is read by the dismissable layer as an outside
interaction and dismisses the menu before the user can choose anything.

The fix swallows outside-interaction dismissals during a 500ms grace
window after the menu opens, but only on coarse pointers — desktop
right-click is untouched.

### Change type

- [x] `bugfix`

### Test plan

1. On iOS Safari (or a touch-emulated browser), long-press the canvas in
the examples app or on tldraw.com.
2. Confirm the context menu opens and stays open after the finger is
lifted.
3. Tap a menu item; confirm the action runs and the menu closes.
4. Tap somewhere outside the menu (a fresh touch) and confirm the menu
dismisses.
5. On desktop, right-click the canvas; confirm the menu opens, an item
can be selected, and an outside click dismisses it normally.

- [ ] Unit tests
- [ ] End to end tests

### Release notes

- Fix the iOS context menu closing immediately after a long-press
release.

### Code changes

| Section   | LOC change |
| --------- | ---------- |
| Core code | +20 / -2   |

Author: steveruizok

packages/tldraw/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx

@@ -1,6 +1,6 @@
 import { preventDefault, useContainer, useEditor, useEditorComponents } from '@tldraw/editor'
 import { ContextMenu as _ContextMenu } from 'radix-ui'
-import { ReactNode, memo, useCallback, useEffect } from 'react'
+import { ReactNode, memo, useCallback, useEffect, useRef } from 'react'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useDirection, useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
@@ -44,6 +44,13 @@ export const DefaultContextMenu = memo(function DefaultContextMenu({
 		}
 	}, [editor, preventEscapeFromLosingShapeFocus])
 
+	// On touch devices, the same touch that triggers Radix's long-press open is still
+	// down when the menu mounts. The release fires events the dismissable layer treats
+	// as an outside interaction and closes the menu. We swallow dismissals during a
+	// short grace window after open so the menu stays put until the user actually
+	// interacts again.
+	const suppressDismissUntilRef = useRef(0)
+
 	const cb = useCallback(
 		(isOpen: boolean) => {
 			const body = editor.getContainerDocument().body
@@ -64,8 +71,10 @@ export const DefaultContextMenu = memo(function DefaultContextMenu({
 					capture: true,
 				})
 
-				// Weird route: selecting locked shapes on long press
 				if (editor.getInstanceState().isCoarsePointer) {
+					suppressDismissUntilRef.current = Date.now() + 500
+
+					// Weird route: selecting locked shapes on long press
 					const selectedShapes = editor.getSelectedShapes()
 					const currentPagePoint = editor.inputs.getCurrentPagePoint()
 
@@ -115,6 +124,15 @@ export const DefaultContextMenu = memo(function DefaultContextMenu({
 						alignOffset={-4}
 						collisionPadding={4}
 						onContextMenu={preventDefault}
+						onPointerDownOutside={(e) => {
+							if (Date.now() < suppressDismissUntilRef.current) e.preventDefault()
+						}}
+						onInteractOutside={(e) => {
+							if (Date.now() < suppressDismissUntilRef.current) e.preventDefault()
+						}}
+						onFocusOutside={(e) => {
+							if (Date.now() < suppressDismissUntilRef.current) e.preventDefault()
+						}}
 					>
 						<TldrawUiMenuContextProvider type="context-menu" sourceId="context-menu">
 							{content}