From f3d82a3276601758e039a48b41cc46ca60060497 Mon Sep 17 00:00:00 2001
From: Rebecca Williams <rjw@observatorysciences.co.uk>
Date: Tue, 10 Dec 2024 11:50:31 +0000
Subject: [PATCH] Fix findDOMNode deprecation warning in slideshow widget

This warning is shown in the tests. Instead a ref is added to each
element.
---
 src/ui/widgets/Slideshow/slideshow.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/ui/widgets/Slideshow/slideshow.tsx b/src/ui/widgets/Slideshow/slideshow.tsx
index 84485157..c15ddd8e 100644
--- a/src/ui/widgets/Slideshow/slideshow.tsx
+++ b/src/ui/widgets/Slideshow/slideshow.tsx
@@ -31,10 +31,15 @@ export const SwitchableWidget = (props: {
   index: number;
   children: [ReactElement];
   transition: { readonly [key: string]: string };
+  nodeRef: React.Ref<HTMLDivElement>;
 }): JSX.Element => {
+  // react-transition-group internally uses findDOMNode which
+  // is deprecated. Fix by passing nodeRef which points to the
+  // transitioning child.
   return (
     <SwitchTransition mode="out-in">
       <CSSTransition
+        nodeRef={props.nodeRef}
         classNames={props.transition}
         key={props.index}
         timeout={250}
@@ -69,6 +74,7 @@ export const SlideshowComponent = (
   const [transition, setTransition] = useState(slideRightTransition);
 
   log.debug(`Slideshow Index: ${childIndex}`);
+  const nodeRef = React.useRef<HTMLDivElement>(null);
 
   return (
     <div
@@ -104,6 +110,7 @@ export const SlideshowComponent = (
         ◀
       </button>
       <div
+        ref={nodeRef}
         style={{
           position: "relative",
           width: "80%",
@@ -114,7 +121,11 @@ export const SlideshowComponent = (
           overflow: props.overflow ?? ""
         }}
       >
-        <SwitchableWidget index={childIndex} transition={transition}>
+        <SwitchableWidget
+          index={childIndex}
+          transition={transition}
+          nodeRef={nodeRef}
+        >
           {props.children as [ReactElement]}
         </SwitchableWidget>
       </div>