[pull] main from tldraw:main

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}