Fix an error when using context menu. (#2186)

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.
This commit is contained in:
Mitja Bezenšek 2023-11-09 17:28:39 +01:00 committed by GitHub
parent 185a0ae658
commit b232ac0c45
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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>
)
}
})