fix(dotcom): dismiss sidebar menus from outside clicks (tldraw#9330)

In order to keep sidebar menus from being stranded when dismissed from
outside the sidebar, this PR clears open menu state when the mobile
sidebar overlay closes and lets desktop canvas clicks dismiss the
workspace switcher. The switcher dismissal overlay covers the viewport,
so that dismissing click is swallowed before it reaches sidebar items or
the canvas, while focus changes from workspace-switch canvas remounts
are still ignored.

### Change type

- [x] `bugfix`

### Test plan

1. On desktop, open the workspace switcher, click the canvas, and verify
the switcher closes without the click deselecting the current shape.
2. In a mobile viewport, open the sidebar, open the workspace switcher,
then click the sidebar overlay and verify the switcher closes.
3. Reopen the mobile sidebar, open a sidebar file menu, then click the
sidebar overlay and verify the file menu closes.
4. `yarn lint-current`
5. `yarn workspace dotcom lint`
6. Attempted `NODE_OPTIONS='--no-strip-types' yarn workspace dotcom
playwright test e2e/tests/smoke/workspaces.spec.ts --project=chromium -g
"closing the mobile sidebar closes open sidebar menus"`, but the shared
`workerStorageState` auth fixture timed out waiting for the login
redirect before the test body ran.

- [x] End to end tests

### Release notes

- Fix sidebar menus staying open after closing the mobile sidebar or
clicking the canvas.

### Code changes

| Section | LOC change |
| ------- | ---------- |
| Apps | +8 / -7 |
| Tests | +68 / -0 |

Author: steveruizok

apps/dotcom/client/e2e/tests/smoke/workspaces.spec.ts

@@ -163,6 +163,74 @@ test.describe('workspaces', () => {
 			await expect(page.getByTestId('tla-workspace-switcher-home')).toBeHidden()
 		})
 
+		test('clicking the canvas closes the workspace switcher without reaching the canvas', async ({
+			page,
+			sidebar,
+		}) => {
+			const shapeId = await page.evaluate(() => {
+				const editor = (window as any).editor
+				editor.createShapes([
+					{
+						type: 'geo',
+						x: 100,
+						y: 100,
+						props: { geo: 'rectangle', w: 100, h: 100 },
+					},
+				])
+				const shape = editor.getCurrentPageShapes()[0]
+				editor.select(shape.id)
+				return shape.id
+			})
+
+			await sidebar.openWorkspaceSwitcher()
+			const homeItem = page.getByTestId('tla-workspace-switcher-home')
+			await expect(homeItem).toBeVisible()
+
+			await page.mouse.click(600, 300)
+			await expect(homeItem).toBeHidden()
+			expect(
+				await page.evaluate(() => {
+					const editor = (window as any).editor
+					return editor.getSelectedShapeIds()
+				})
+			).toEqual([shapeId])
+		})
+
+		test('closing the mobile sidebar closes open sidebar menus', async ({ page, sidebar }) => {
+			const fileName = getRandomName()
+			await sidebar.createNewDocument(fileName)
+
+			await page.setViewportSize({ width: 390, height: 844 })
+
+			const mobileToggle = page.getByTestId('tla-sidebar-toggle-mobile')
+			const mobileOverlay = page.getByTestId('tla-sidebar-overlay-mobile')
+			const closeMobileSidebar = async () => {
+				await mobileOverlay.click({ position: { x: 380, y: 422 } })
+				await expect(mobileOverlay).toBeHidden()
+			}
+
+			await expect(mobileToggle).toBeVisible()
+			await mobileToggle.click()
+			await expect(mobileOverlay).toBeVisible()
+
+			await sidebar.openWorkspaceSwitcher()
+			await expect(page.getByTestId('tla-workspace-switcher-home')).toBeVisible()
+
+			await closeMobileSidebar()
+			await expect(page.getByTestId('tla-workspace-switcher-home')).toBeHidden()
+
+			await mobileToggle.click()
+			await expect(mobileOverlay).toBeVisible()
+
+			const fileLink = sidebar.getFileByName(fileName)
+			await fileLink.hover()
+			await fileLink.getByRole('button').click()
+			await expect(page.getByRole('menuitem', { name: 'Rename' })).toBeVisible()
+
+			await closeMobileSidebar()
+			await expect(page.getByRole('menuitem', { name: 'Rename' })).toBeHidden()
+		})
+
 		test('create file button creates in the active workspace', async ({ sidebar }) => {
 			const workspaceName = getRandomName()
 			const file1 = getRandomName()

apps/dotcom/client/src/tla/components/TlaSidebar/TlaSidebar.tsx

@@ -1,4 +1,5 @@
 import { memo, useCallback, useEffect } from 'react'
+import { tlmenus } from 'tldraw'
 import { useActiveWorkspaceId } from '../../hooks/useActiveWorkspaceId'
 import { useHasFlag } from '../../hooks/useHasFlag'
 import { useTldrFileDrop } from '../../hooks/useTldrFileDrop'
@@ -43,6 +44,7 @@ export const TlaSidebar = memo(function TlaSidebar() {
 	}, [trackEvent])
 
 	const handleOverlayClick = useCallback(() => {
+		tlmenus.clearOpenMenus()
 		updateLocalSessionState(() => ({ isSidebarOpenMobile: false }))
 	}, [])
 
@@ -56,6 +58,7 @@ export const TlaSidebar = memo(function TlaSidebar() {
 			<button
 				className={styles.sidebarOverlayMobile}
 				data-visiblemobile={isSidebarOpenMobile}
+				data-testid="tla-sidebar-overlay-mobile"
 				onClick={handleOverlayClick}
 			/>
 			<div

apps/dotcom/client/src/tla/components/TlaSidebar/components/TlaSidebarWorkspaceSwitcher.tsx

@@ -90,6 +90,7 @@ export function TlaSidebarWorkspaceSwitcher() {
 				/>
 			)}
 			<div className={styles.sidebarWorkspaceSwitcherRoot}>
+				{/* Modal doesn't really work for us here because other elements have explicit pointer-events on. Thus the switcher overlay.*/}
 				<_DropdownMenu.Root open={isOpen} onOpenChange={onOpenChange} modal>
 					<_DropdownMenu.Trigger asChild>
 						<button
@@ -116,12 +117,9 @@ export function TlaSidebarWorkspaceSwitcher() {
 						sideOffset={4}
 						alignOffset={-4}
 						collisionPadding={8}
-						// Switching workspaces mounts a new canvas that steals focus as it
-						// loads. Without this the focus shift would dismiss the switcher mid-
-						// switch. The open state is driven externally (useGlobalMenuIsOpen), so
-						// the menu still closes via the trigger, the overlay, or Escape.
-						onPointerDownOutside={(e) => e.preventDefault()}
-						onInteractOutside={(e) => e.preventDefault()}
+						// Switching workspaces mounts a new canvas that steals focus as it loads.
+						// Ignore that focus shift while still allowing real outside pointer clicks
+						// (for example, clicking the canvas) to dismiss the switcher.
 						onFocusOutside={(e) => e.preventDefault()}
 					>
 						<WorkspaceSwitcherItem

apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css

@@ -548,7 +548,7 @@
 }
 
 .sidebarWorkspaceSwitcherOverlay {
-	position: absolute;
+	position: fixed;
 	inset: 0;
 	z-index: calc(var(--tl-layer-menus) - 1);
 	pointer-events: all;