From 3b27cb260f2bd51de49bb4bcb56ca904ffcd7f1d Mon Sep 17 00:00:00 2001 From: Fangdun Tsai Date: Thu, 14 Mar 2024 10:35:12 +0800 Subject: [PATCH] fix: parent cycle problem --- .../src/PanelResizeHandle.test.tsx | 2 +- .../src/vendor/stacking-order.ts | 11 ++++++++--- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx b/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx index 03c81b9fe..530335f97 100644 --- a/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx +++ b/packages/react-resizable-panels/src/PanelResizeHandle.test.tsx @@ -1,6 +1,6 @@ import { Root, createRoot } from "react-dom/client"; import { act } from "react-dom/test-utils"; -import type { PanelResizeHandleProps } from "react-resizable-panels"; +import type { PanelResizeHandleProps } from "./PanelResizeHandle"; import { Panel, PanelGroup, PanelResizeHandle } from "."; import { assert } from "./utils/assert"; import { getResizeHandleElement } from "./utils/dom/getResizeHandleElement"; diff --git a/packages/react-resizable-panels/src/vendor/stacking-order.ts b/packages/react-resizable-panels/src/vendor/stacking-order.ts index b8979abbd..ec51aad80 100644 --- a/packages/react-resizable-panels/src/vendor/stacking-order.ts +++ b/packages/react-resizable-panels/src/vendor/stacking-order.ts @@ -62,6 +62,7 @@ const props = /** @param {HTMLElement} node */ function is_flex_item(node: HTMLElement) { + // @ts-ignore const display = getComputedStyle(get_parent(node) ?? node).display; return display === "flex" || display === "inline-flex"; } @@ -116,11 +117,12 @@ function get_z_index(node: HTMLElement | null) { } /** @param {HTMLElement} node */ -function get_ancestors(node: HTMLElement) { +function get_ancestors(node: HTMLElement | null) { const ancestors = []; while (node) { ancestors.push(node); + // @ts-ignore node = get_parent(node); } @@ -129,6 +131,9 @@ function get_ancestors(node: HTMLElement) { /** @param {HTMLElement} node */ function get_parent(node: HTMLElement) { - // @ts-ignore - return node.parentNode?.host; + const { parentNode } = node; + if (parentNode && parentNode instanceof ShadowRoot) { + return parentNode.host + } + return parentNode; }