From b232ac0c456ed4c03723917e0f120428d6a3d623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= <mitja.bezensek@gmail.com>
Date: Thu, 9 Nov 2023 17:28:39 +0100
Subject: [PATCH] Fix an error when using context menu. (#2186)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes the console error when using the context menu.

Fixes https://github.com/tldraw/tldraw/issues/2170

### Change Type

- [x] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [ ] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1.  Start the app.
2. Right click to open the context menu.
3. You should not see the "Warning: Function components cannot be given
refs. Attempts to access this ref will fail. Did you mean to use
React.forwardRef()?" error in the console. The error only happens on
first right click, so make sure to refresh the page before trying.

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

### Release Notes

- Fixes the console error when opening the context menu for the first
time.
---
 packages/tldraw/src/lib/ui/components/ContextMenu.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/tldraw/src/lib/ui/components/ContextMenu.tsx b/packages/tldraw/src/lib/ui/components/ContextMenu.tsx
index b9cf25a31..60d2a0cab 100644
--- a/packages/tldraw/src/lib/ui/components/ContextMenu.tsx
+++ b/packages/tldraw/src/lib/ui/components/ContextMenu.tsx
@@ -1,7 +1,7 @@
 import * as _ContextMenu from '@radix-ui/react-context-menu'
 import { Editor, preventDefault, useContainer, useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
-import { useCallback, useState } from 'react'
+import { forwardRef, useCallback, useState } from 'react'
 import { TLUiMenuChild } from '../hooks/menuHelpers'
 import { useBreakpoint } from '../hooks/useBreakpoint'
 import { useContextMenuSchema } from '../hooks/useContextMenuSchema'
@@ -96,7 +96,7 @@ export const ContextMenu = function ContextMenu({ children }: { children: any })
 	)
 }
 
-function ContextMenuContent() {
+const ContextMenuContent = forwardRef(function ContextMenuContent() {
 	const editor = useEditor()
 	const msg = useTranslation()
 	const menuSchema = useContextMenuSchema()
@@ -226,4 +226,4 @@ function ContextMenuContent() {
 			</_ContextMenu.Content>
 		</_ContextMenu.Portal>
 	)
-}
+})