From 237891bb3eed6253c6e5ae516778db4e283a754a Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Wed, 11 Dec 2024 18:24:10 -0500
Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=9B=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/red-berries-sleep.md                   | 5 +++++
 packages/itwinui-react/src/core/Panels/Panels.tsx | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/red-berries-sleep.md

diff --git a/.changeset/red-berries-sleep.md b/.changeset/red-berries-sleep.md
new file mode 100644
index 00000000000..0607dac0376
--- /dev/null
+++ b/.changeset/red-berries-sleep.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed `Panels` animations not working in some rare cases.
diff --git a/packages/itwinui-react/src/core/Panels/Panels.tsx b/packages/itwinui-react/src/core/Panels/Panels.tsx
index bbe1a986ea9..96ad742f293 100644
--- a/packages/itwinui-react/src/core/Panels/Panels.tsx
+++ b/packages/itwinui-react/src/core/Panels/Panels.tsx
@@ -84,7 +84,7 @@ export const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
       ReactDOM.flushSync(() => setActivePanelId(newActiveId));
       onActiveIdChange.current?.(newActiveId);
 
-      ref.current?.ownerDocument.getElementById(newActiveId)?.scrollIntoView({
+      ref.current?.querySelector(`[id='${newActiveId}']`)?.scrollIntoView({
         block: 'nearest',
         inline: 'center',
         behavior: motionOk ? 'smooth' : 'instant',

From b4b1985c1b826a37c19cf6c67a0288f16fcc826c Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Thu, 12 Dec 2024 15:42:19 -0500
Subject: [PATCH 2/4] `getRootNode()`

---
 packages/itwinui-react/src/core/Panels/Panels.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/itwinui-react/src/core/Panels/Panels.tsx b/packages/itwinui-react/src/core/Panels/Panels.tsx
index 96ad742f293..ffb3ac6cc6f 100644
--- a/packages/itwinui-react/src/core/Panels/Panels.tsx
+++ b/packages/itwinui-react/src/core/Panels/Panels.tsx
@@ -84,11 +84,13 @@ export const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
       ReactDOM.flushSync(() => setActivePanelId(newActiveId));
       onActiveIdChange.current?.(newActiveId);
 
-      ref.current?.querySelector(`[id='${newActiveId}']`)?.scrollIntoView({
-        block: 'nearest',
-        inline: 'center',
-        behavior: motionOk ? 'smooth' : 'instant',
-      });
+      (ref.current?.getRootNode() as Document)
+        .getElementById(newActiveId)
+        ?.scrollIntoView({
+          block: 'nearest',
+          inline: 'center',
+          behavior: motionOk ? 'smooth' : 'instant',
+        });
     },
     [activePanelId, motionOk, onActiveIdChange],
   );

From 7202f77e24c4d8b2e3d59758e87d37c91e292e30 Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Thu, 12 Dec 2024 15:46:56 -0500
Subject: [PATCH 3/4] Better type

---
 packages/itwinui-react/src/core/Panels/Panels.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/Panels/Panels.tsx b/packages/itwinui-react/src/core/Panels/Panels.tsx
index ffb3ac6cc6f..24c50bae970 100644
--- a/packages/itwinui-react/src/core/Panels/Panels.tsx
+++ b/packages/itwinui-react/src/core/Panels/Panels.tsx
@@ -84,7 +84,7 @@ export const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
       ReactDOM.flushSync(() => setActivePanelId(newActiveId));
       onActiveIdChange.current?.(newActiveId);
 
-      (ref.current?.getRootNode() as Document)
+      (ref.current?.getRootNode() as Document | DocumentFragment)
         .getElementById(newActiveId)
         ?.scrollIntoView({
           block: 'nearest',

From cd4e99aafebb5879bf41cf26d3ed418e74a52bee Mon Sep 17 00:00:00 2001
From: Rohan <45748283+r100-stack@users.noreply.github.com>
Date: Fri, 13 Dec 2024 08:01:55 -0500
Subject: [PATCH 4/4] Types

---
 packages/itwinui-react/src/core/Panels/Panels.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/itwinui-react/src/core/Panels/Panels.tsx b/packages/itwinui-react/src/core/Panels/Panels.tsx
index 24c50bae970..9483f1dee42 100644
--- a/packages/itwinui-react/src/core/Panels/Panels.tsx
+++ b/packages/itwinui-react/src/core/Panels/Panels.tsx
@@ -84,7 +84,7 @@ export const PanelsWrapper = React.forwardRef((props, forwardedRef) => {
       ReactDOM.flushSync(() => setActivePanelId(newActiveId));
       onActiveIdChange.current?.(newActiveId);
 
-      (ref.current?.getRootNode() as Document | DocumentFragment)
+      (ref.current?.getRootNode() as Document | ShadowRoot)
         .getElementById(newActiveId)
         ?.scrollIntoView({
           block: 'nearest',