From cd91f4a4d39e934194bceb8d9a9dd8c6746e1cd6 Mon Sep 17 00:00:00 2001 From: zaxer2 Date: Fri, 3 Jan 2025 13:22:07 -0500 Subject: [PATCH 1/2] Updated react dockview-demo CodeSandbox to reset relevant state on subsequent onReady calls Strict Mode causes the Dockview component to render twice, causing onReady to be called twice, which puts two copies of DefaultLayout in state without resetting between calls. A most-ideal solution would probably be to expose an onUnload hook or something like that, to be called after one onReady but before the next. Then, the state resets could be called in that hook. but this fix will at least ensure the Dockview-Demo codesandbox behaves nicely for the time being. --- .../docs/sandboxes/react/dockview/demo-dockview/src/app.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx index a9f4ea97c..0b8701fd6 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx @@ -178,6 +178,11 @@ const DockviewDemo = (props: { theme?: string }) => { const onReady = (event: DockviewReadyEvent) => { setApi(event.api); + setPanels([]); + setGroups([]); + setActivePanel(undefined); + setActiveGroup(undefined); + addLogLine(`Dockview Is Ready`); event.api.onDidAddPanel((event) => { setPanels((_) => [..._, event.id]); From 10fd5778dc5fc78bfa334d1b9090fb9f6e106877 Mon Sep 17 00:00:00 2001 From: zaxer2 Date: Fri, 3 Jan 2025 13:24:28 -0500 Subject: [PATCH 2/2] Copying Sandbox change to corresponding Template see prev. commit --- .../docs/templates/dockview/demo-dockview/react/src/app.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx b/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx index 3ab3066da..befc23f44 100644 --- a/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx +++ b/packages/docs/templates/dockview/demo-dockview/react/src/app.tsx @@ -124,6 +124,11 @@ const DockviewDemo = (props: { theme?: string }) => { const onReady = (event: DockviewReadyEvent) => { setApi(event.api); + setPanels([]); + setGroups([]); + setActivePanel(undefined); + setActiveGroup(undefined); + addLogLine(`Dockview Is Ready`); }; React.useEffect(() => {