From 0e8e000f79441e6d8465bff4c568d05c93e1a0c1 Mon Sep 17 00:00:00 2001
From: Alex Kim <45559664+alex-kim-dev@users.noreply.github.com>
Date: Mon, 19 Sep 2022 13:27:18 +0500
Subject: [PATCH] fix scrolling menus (#977)

* attempt to fix scrolling menus

* add container to keyboard shortuts

Co-authored-by: Judicael <46365844+judicaelandria@users.noreply.github.com>
---
 packages/core/src/components/Canvas/Canvas.tsx                | 2 +-
 .../src/components/Primitives/DropdownMenu/DMContent.tsx      | 2 +-
 .../src/components/ToolsPanel/KeyboardShortcutDialog.tsx      | 4 +++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/Canvas/Canvas.tsx b/packages/core/src/components/Canvas/Canvas.tsx
index 601980304..7ed01cea7 100644
--- a/packages/core/src/components/Canvas/Canvas.tsx
+++ b/packages/core/src/components/Canvas/Canvas.tsx
@@ -84,7 +84,7 @@ function _Canvas<T extends TLShape, M extends Record<string, unknown>>({
 
   rZoomRef.current = pageState.camera.zoom
 
-  useZoomEvents(rZoomRef, externalContainerRef || rCanvas)
+  useZoomEvents(rZoomRef, rCanvas)
 
   useResizeObserver(rCanvas, onBoundsChange)
 
diff --git a/packages/tldraw/src/components/Primitives/DropdownMenu/DMContent.tsx b/packages/tldraw/src/components/Primitives/DropdownMenu/DMContent.tsx
index 653861ce9..1f785defe 100644
--- a/packages/tldraw/src/components/Primitives/DropdownMenu/DMContent.tsx
+++ b/packages/tldraw/src/components/Primitives/DropdownMenu/DMContent.tsx
@@ -29,7 +29,7 @@ export function DMContent({
   const container = useContainer()
 
   return (
-    <DropdownMenu.Portal container={overflow ? undefined : container.current} dir="ltr">
+    <DropdownMenu.Portal container={container.current} dir="ltr">
       <DropdownMenu.Content
         align={align}
         alignOffset={alignOffset}
diff --git a/packages/tldraw/src/components/ToolsPanel/KeyboardShortcutDialog.tsx b/packages/tldraw/src/components/ToolsPanel/KeyboardShortcutDialog.tsx
index 54f17b719..7bcb5c6d2 100644
--- a/packages/tldraw/src/components/ToolsPanel/KeyboardShortcutDialog.tsx
+++ b/packages/tldraw/src/components/ToolsPanel/KeyboardShortcutDialog.tsx
@@ -6,6 +6,7 @@ import { IconButton } from '~components/Primitives/IconButton'
 import { Kbd } from '~components/Primitives/Kbd'
 import { RowButton } from '~components/Primitives/RowButton'
 import { breakpoints } from '~components/breakpoints'
+import { useContainer } from '~hooks'
 import { styled } from '~styles'
 
 export function KeyboardShortcutDialog({
@@ -14,6 +15,7 @@ export function KeyboardShortcutDialog({
   onOpenChange?: (open: boolean) => void
 }) {
   const intl = useIntl()
+  const container = useContainer()
 
   const shortcuts = {
     Tools: [
@@ -89,7 +91,7 @@ export function KeyboardShortcutDialog({
           <FormattedMessage id="keyboard.shortcuts" />
         </RowButton>
       </Dialog.Trigger>
-      <Dialog.Portal>
+      <Dialog.Portal container={container.current}>
         <DialogOverlay />
         <DialogContent>
           <DialogTitle>