From 185a0ae65896abf75c7a236d8be3a83ec5dfa083 Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Thu, 9 Nov 2023 16:21:46 +0000
Subject: [PATCH] [fix] actions menu freezing ui (#2187)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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     |  4 ++++
 packages/tldraw/src/lib/ui/hooks/menuHelpers.ts      |  2 +-
 .../tldraw/src/lib/ui/hooks/useActionsMenuSchema.tsx | 12 ++++++------
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/editor/src/lib/hooks/useCanvasEvents.ts b/packages/editor/src/lib/hooks/useCanvasEvents.ts
index edc120f4d..be8a29a1a 100644
--- a/packages/editor/src/lib/hooks/useCanvasEvents.ts
+++ b/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()
 				}
diff --git a/packages/tldraw/src/lib/ui/hooks/menuHelpers.ts b/packages/tldraw/src/lib/ui/hooks/menuHelpers.ts
index d1dd0d921..19cfd0898 100644
--- a/packages/tldraw/src/lib/ui/hooks/menuHelpers.ts
+++ b/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]
 	)
 }
 
diff --git a/packages/tldraw/src/lib/ui/hooks/useActionsMenuSchema.tsx b/packages/tldraw/src/lib/ui/hooks/useActionsMenuSchema.tsx
index 84e77598e..bce08000e 100644
--- a/packages/tldraw/src/lib/ui/hooks/useActionsMenuSchema.tsx
+++ b/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 {