[fix] actions menu freezing ui (#2187)

This PR fixes a bug where a render to the popover component would cause
the menu to never close.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. Open the quick actions menu with two shapes selected
2. Click the group button
3. Click on the canvas

The menu should close.

### Release Notes

- Fix actions menu not closing when clicking the canvas after grouping
items via the actions menu.

packages/editor/src/lib/hooks/useCanvasEvents.ts

@@ -41,6 +41,10 @@ export function useCanvasEvents() {
 				})
 
 				if (editor.openMenus.length > 0) {
+					editor.updateInstanceState({
+						openMenus: [],
+					})
+
 					document.body.click()
 					editor.getContainer().focus()
 				}

packages/tldraw/src/lib/ui/hooks/menuHelpers.ts

@@ -175,7 +175,7 @@ export const useAllowUngroup = () => {
 	return useValue(
 		'allowUngroup',
 		() => editor.selectedShapeIds.some((id) => editor.getShape(id)?.type === 'group'),
-		[]
+		[editor]
 	)
 }
 

packages/tldraw/src/lib/ui/hooks/useActionsMenuSchema.tsx

@@ -1,4 +1,4 @@
-import { Editor, track, useEditor } from '@tldraw/editor'
+import { Editor, useEditor, useValue } from '@tldraw/editor'
 import React, { useMemo } from 'react'
 import {
 	TLUiMenuSchema,
@@ -33,14 +33,14 @@ export type ActionsMenuSchemaProviderProps = {
 }
 
 /** @internal */
-export const ActionsMenuSchemaProvider = track(function ActionsMenuSchemaProvider({
+export const ActionsMenuSchemaProvider = ({
 	overrides,
 	children,
-}: ActionsMenuSchemaProviderProps) {
+}: ActionsMenuSchemaProviderProps) => {
 	const editor = useEditor()
 	const actions = useActions()
 
-	const selectedCount = editor.selectedShapeIds.length
+	const selectedCount = useValue('selected count', () => editor.selectedShapeIds.length, [editor])
 
 	const oneSelected = selectedCount > 0
 	const twoSelected = selectedCount > 1
@@ -50,7 +50,7 @@ export const ActionsMenuSchemaProvider = track(function ActionsMenuSchemaProvide
 	const allowUngroup = useAllowUngroup()
 	const showEditLink = useHasLinkShapeSelected()
 	const breakpoint = useBreakpoint()
-	const isZoomedTo100 = editor.zoomLevel === 1
+	const isZoomedTo100 = useValue('zoom is 1', () => editor.zoomLevel === 1, [editor])
 
 	const actionTLUiMenuSchema = useMemo<TLUiMenuSchema>(() => {
 		const results = [
@@ -107,7 +107,7 @@ export const ActionsMenuSchemaProvider = track(function ActionsMenuSchemaProvide
 			{children}
 		</ActionsMenuSchemaContext.Provider>
 	)
-})
+}
 
 /** @public */
 export function useActionsMenuSchema(): TLUiMenuSchema {