From 195337d8656b89a8b8a66c8f7d1b9923ffc1f5f8 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Thu, 31 Oct 2024 11:21:19 +0000
Subject: [PATCH] Pass nodeRef to CSSTransition to avoid ReactDOM.findDOMNode
 (#28339)

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/messages/MImageBody.tsx  | 22 ++++++++++++++++---
 .../views/rooms/RoomBreadcrumbs.tsx           | 17 +++++++++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/views/messages/MImageBody.tsx b/src/components/views/messages/MImageBody.tsx
index 0b4cc8cb3b..5c7a553364 100644
--- a/src/components/views/messages/MImageBody.tsx
+++ b/src/components/views/messages/MImageBody.tsx
@@ -61,6 +61,7 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
 
     private unmounted = true;
     private image = createRef<HTMLImageElement>();
+    private placeholder = createRef<HTMLDivElement>();
     private timeout?: number;
     private sizeWatcher?: string;
 
@@ -453,7 +454,11 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
                 "mx_MImageBody_placeholder--blurhash": this.props.mxEvent.getContent().info?.[BLURHASH_FIELD],
             });
 
-            placeholder = <div className={classes}>{this.getPlaceholder(maxWidth, maxHeight)}</div>;
+            placeholder = (
+                <div className={classes} ref={this.placeholder}>
+                    {this.getPlaceholder(maxWidth, maxHeight)}
+                </div>
+            );
         }
 
         let showPlaceholder = Boolean(placeholder);
@@ -499,8 +504,19 @@ export default class MImageBody extends React.Component<IBodyProps, IState> {
         if (!this.props.forExport) {
             placeholder = (
                 <SwitchTransition mode="out-in">
-                    <CSSTransition classNames="mx_rtg--fade" key={`img-${showPlaceholder}`} timeout={300}>
-                        {showPlaceholder ? placeholder : <></> /* Transition always expects a child */}
+                    <CSSTransition
+                        classNames="mx_rtg--fade"
+                        key={`img-${showPlaceholder}`}
+                        timeout={300}
+                        nodeRef={this.placeholder}
+                    >
+                        {
+                            showPlaceholder ? (
+                                placeholder
+                            ) : (
+                                <div ref={this.placeholder} />
+                            ) /* Transition always expects a child */
+                        }
                     </CSSTransition>
                 </SwitchTransition>
             );
diff --git a/src/components/views/rooms/RoomBreadcrumbs.tsx b/src/components/views/rooms/RoomBreadcrumbs.tsx
index 19405e96b0..5de4687cb9 100644
--- a/src/components/views/rooms/RoomBreadcrumbs.tsx
+++ b/src/components/views/rooms/RoomBreadcrumbs.tsx
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
 Please see LICENSE files in the repository root for full details.
 */
 
-import React from "react";
+import React, { createRef } from "react";
 import { Room } from "matrix-js-sdk/src/matrix";
 import { CSSTransition } from "react-transition-group";
 
@@ -61,6 +61,7 @@ const RoomBreadcrumbTile: React.FC<{ room: Room; onClick: (ev: ButtonEvent) => v
 
 export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState> {
     private isMounted = true;
+    private toolbar = createRef<HTMLDivElement>();
 
     public constructor(props: IProps) {
         super(props);
@@ -113,8 +114,18 @@ export default class RoomBreadcrumbs extends React.PureComponent<IProps, IState>
         if (tiles.length > 0) {
             // NOTE: The CSSTransition timeout MUST match the timeout in our CSS!
             return (
-                <CSSTransition appear={true} in={this.state.doAnimation} timeout={640} classNames="mx_RoomBreadcrumbs">
-                    <Toolbar className="mx_RoomBreadcrumbs" aria-label={_t("room_list|breadcrumbs_label")}>
+                <CSSTransition
+                    appear={true}
+                    in={this.state.doAnimation}
+                    timeout={640}
+                    classNames="mx_RoomBreadcrumbs"
+                    nodeRef={this.toolbar}
+                >
+                    <Toolbar
+                        className="mx_RoomBreadcrumbs"
+                        aria-label={_t("room_list|breadcrumbs_label")}
+                        ref={this.toolbar}
+                    >
                         {tiles.slice(this.state.skipFirst ? 1 : 0)}
                     </Toolbar>
                 </CSSTransition>