Merge pull request #66 from /issues/64

Disable Panel pointer-events during resize
bvaughn · Jan 5, 2023 · bbb7b80 · bbb7b80 · vercel · Jan 5, 2023
2 parents 5cfd0d2 + 4cac9e6
commit bbb7b80
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/react-resizable-panels/CHANGELOG.md b/packages/react-resizable-panels/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## 0.0.29
 * [#58](https://github.com/bvaughn/react-resizable-panels/pull/58): Add imperative `collapse`, `expand`, and `resize` methods to `Panel`.
+* [#64](https://github.com/bvaughn/react-resizable-panels/pull/64): Disable `pointer-events` inside of `Panel`s during resize. This avoid edge cases like nested iframes.
 * [#57](https://github.com/bvaughn/react-resizable-panels/pull/57): Improve server rendering check to include `window.document`. This more closely matches React's own check and avoids false positives for environments that alias `window` to some global object.
 
 ## 0.0.28

diff --git a/packages/react-resizable-panels/src/PanelGroup.ts b/packages/react-resizable-panels/src/PanelGroup.ts
@@ -196,9 +196,13 @@ export function PanelGroup({
 
         // Without this, Panel sizes may be unintentionally overridden by their content.
         overflow: "hidden",
+
+        // Disable pointer events inside of a panel during resize.
+        // This avoid edge cases like nested iframes.
+        pointerEvents: activeHandleId !== null ? "none" : undefined,
       };
     },
-    [direction, sizes]
+    [activeHandleId, direction, sizes]
   );
 
   const registerPanel = useCallback((id: string, panel: PanelData) => {