[fix] mobile style panel switching open / closed (#2101)

This PR fixes a bug where the mobile style panel would be immediately
re-opened when clicking on the style panel icon on mobile.

### Change Type

- [x] `patch` — Bug fix

### Test Plan

1. On mobile, tap the style panel to open it
2. Tap again to close it.

### Release Notes

- Fix bug with style panel

packages/tldraw/src/lib/ui/components/MobileStylePanel.tsx

@@ -6,7 +6,6 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import { useCallback } from 'react'
-import { useOpenMenuCloser } from '../hooks/useOpenMenuCloser'
 import { useRelevantStyles } from '../hooks/useRevelantStyles'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 import { StylePanel } from './StylePanel/StylePanel'
@@ -40,8 +39,6 @@ export function MobileStylePanel() {
 		[editor]
 	)
 
-	const extraEventsToToggleMenu = useOpenMenuCloser()
-
 	return (
 		<Popover id="style menu" onOpenChange={handleStylesOpenChange}>
 			<PopoverTrigger disabled={disableStylePanel}>
@@ -52,7 +49,6 @@ export function MobileStylePanel() {
 						color: disableStylePanel ? 'var(--color-muted-1)' : currentColor,
 					}}
 					title={msg('style-panel.title')}
-					{...extraEventsToToggleMenu}
 				>
 					<Icon icon={disableStylePanel ? 'blob' : color?.type === 'mixed' ? 'mixed' : 'blob'} />
 				</Button>

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

@@ -8,9 +8,17 @@ export function useMenuIsOpen(id: string, cb?: (isOpen: boolean) => void) {
 	const rIsOpen = useRef(false)
 	const trackEvent = useUiEvents()
 
+	const rLastChange = useRef(0)
+
 	const onOpenChange = useCallback(
 		(isOpen: boolean) => {
+			// prevent multiple calls in quick succession
+			const now = Date.now()
+			if (now - rLastChange.current < 50) return
+			rLastChange.current = now
+
 			rIsOpen.current = isOpen
+
 			editor.batch(() => {
 				if (isOpen) {
 					editor.complete()

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

@@ -1,23 +0,0 @@
-import { preventDefault, useEditor } from '@tldraw/editor'
-import { useCallback, useRef } from 'react'
-
-export function useOpenMenuCloser() {
-	const editor = useEditor()
-	const rIsPointingToClose = useRef(false)
-
-	const handlePointerDown = useCallback(() => {
-		if (editor.openMenus.length > 0) {
-			editor.updateInstanceState({ openMenus: [] })
-			rIsPointingToClose.current = true
-		}
-	}, [editor])
-
-	const handleClick = useCallback((e: React.MouseEvent) => {
-		if (rIsPointingToClose.current) {
-			preventDefault(e)
-		}
-		rIsPointingToClose.current = false
-	}, [])
-
-	return { handlePointerDown, handleClick }
-}