From 10b3c0787adbe438bf58a689d8638ebd0a64cef3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Tue, 20 Sep 2022 11:47:31 +0200
Subject: [PATCH] CSSTransition fixes warnings (#55340)

---
 .../grafana-ui/src/components/Dropdown/Dropdown.tsx  |  6 ++++--
 public/app/core/components/MegaMenu/NavBarMenu.tsx   |  9 ++++++++-
 public/app/core/components/NavBar/NavBarMenu.tsx     | 12 ++++++++++--
 .../search/components/DashboardSearchModal.tsx       |  6 ++++--
 4 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
index c8614af5231..07d05fcc0dc 100644
--- a/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/Dropdown.tsx
@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 import { FocusScope } from '@react-aria/focus';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { usePopperTooltip } from 'react-popper-tooltip';
 import { CSSTransition } from 'react-transition-group';
 
@@ -16,6 +16,7 @@ export interface Props {
 
 export const Dropdown = React.memo(({ children, overlay, placement }: Props) => {
   const [show, setShow] = useState(false);
+  const transitionRef = useRef(null);
 
   const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip({
     visible: show,
@@ -46,12 +47,13 @@ export const Dropdown = React.memo(({ children, overlay, placement }: Props) =>
             <div ref={setTooltipRef} {...getTooltipProps()} onClick={onOverlayClicked}>
               <div {...getArrowProps({ className: 'tooltip-arrow' })} />
               <CSSTransition
+                nodeRef={transitionRef}
                 appear={true}
                 in={true}
                 timeout={{ appear: animationDuration, exit: 0, enter: 0 }}
                 classNames={animationStyles}
               >
-                {ReactUtils.renderOrCallToRender(overlay)}
+                <div ref={transitionRef}>{ReactUtils.renderOrCallToRender(overlay)}</div>
               </CSSTransition>
             </div>
           </FocusScope>
diff --git a/public/app/core/components/MegaMenu/NavBarMenu.tsx b/public/app/core/components/MegaMenu/NavBarMenu.tsx
index 01e1c105bbc..ca81a5a15c4 100644
--- a/public/app/core/components/MegaMenu/NavBarMenu.tsx
+++ b/public/app/core/components/MegaMenu/NavBarMenu.tsx
@@ -55,6 +55,7 @@ export function NavBarMenu({ activeItem, navItems, searchBarHidden, onClose }: P
   return (
     <OverlayContainer>
       <CSSTransition
+        nodeRef={ref}
         in={isOpen}
         unmountOnExit={true}
         classNames={animStyles.overlay}
@@ -93,7 +94,13 @@ export function NavBarMenu({ activeItem, navItems, searchBarHidden, onClose }: P
           </FocusScope>
         </div>
       </CSSTransition>
-      <CSSTransition in={isOpen} unmountOnExit={true} classNames={animStyles.backdrop} timeout={animationSpeed}>
+      <CSSTransition
+        nodeRef={backdropRef}
+        in={isOpen}
+        unmountOnExit={true}
+        classNames={animStyles.backdrop}
+        timeout={animationSpeed}
+      >
         <div ref={backdropRef} className={styles.backdrop} {...underlayProps} />
       </CSSTransition>
     </OverlayContainer>
diff --git a/public/app/core/components/NavBar/NavBarMenu.tsx b/public/app/core/components/NavBar/NavBarMenu.tsx
index 30bdbbeaaad..da555be329e 100644
--- a/public/app/core/components/NavBar/NavBarMenu.tsx
+++ b/public/app/core/components/NavBar/NavBarMenu.tsx
@@ -35,6 +35,7 @@ export function NavBarMenu({ activeItem, isOpen, navItems, onClose, setMenuAnima
   const ANIMATION_DURATION = theme.transitions.duration.standard;
   const animStyles = getAnimStyles(theme, ANIMATION_DURATION);
   const ref = useRef(null);
+  const backdropRef = useRef(null);
   const { dialogProps } = useDialog({}, ref);
 
   const { overlayProps, underlayProps } = useOverlay(
@@ -50,6 +51,7 @@ export function NavBarMenu({ activeItem, isOpen, navItems, onClose, setMenuAnima
     <OverlayContainer>
       <FocusScope contain restoreFocus autoFocus>
         <CSSTransition
+          nodeRef={ref}
           onEnter={() => setMenuAnimationInProgress(true)}
           onExited={() => setMenuAnimationInProgress(false)}
           appear={isOpen}
@@ -88,8 +90,14 @@ export function NavBarMenu({ activeItem, isOpen, navItems, onClose, setMenuAnima
           </div>
         </CSSTransition>
       </FocusScope>
-      <CSSTransition appear={isOpen} in={isOpen} classNames={animStyles.backdrop} timeout={ANIMATION_DURATION}>
-        <div className={styles.backdrop} {...underlayProps} />
+      <CSSTransition
+        nodeRef={backdropRef}
+        appear={isOpen}
+        in={isOpen}
+        classNames={animStyles.backdrop}
+        timeout={ANIMATION_DURATION}
+      >
+        <div className={styles.backdrop} {...underlayProps} ref={backdropRef} />
       </CSSTransition>
     </OverlayContainer>
   );
diff --git a/public/app/features/search/components/DashboardSearchModal.tsx b/public/app/features/search/components/DashboardSearchModal.tsx
index 593863272bb..67b7736586d 100644
--- a/public/app/features/search/components/DashboardSearchModal.tsx
+++ b/public/app/features/search/components/DashboardSearchModal.tsx
@@ -26,6 +26,7 @@ export function DashboardSearchModal({ isOpen }: Props) {
   const animStyles = useStyles2((theme) => getAnimStyles(theme, ANIMATION_DURATION));
   const { query, onQueryChange, onCloseSearch } = useSearchQuery({});
   const ref = useRef<HTMLDivElement>(null);
+  const backdropRef = useRef(null);
   const [animationComplete, setAnimationComplete] = useState(false);
 
   const { overlayProps, underlayProps } = useOverlay({ isOpen, onClose: onCloseSearch }, ref);
@@ -45,10 +46,11 @@ export function DashboardSearchModal({ isOpen }: Props) {
 
   return (
     <OverlayContainer>
-      <CSSTransition appear in timeout={ANIMATION_DURATION} classNames={animStyles.underlay}>
-        <div onClick={onCloseSearch} className={styles.underlay} {...underlayProps} />
+      <CSSTransition nodeRef={backdropRef} appear in timeout={ANIMATION_DURATION} classNames={animStyles.underlay}>
+        <div ref={backdropRef} onClick={onCloseSearch} className={styles.underlay} {...underlayProps} />
       </CSSTransition>
       <CSSTransition
+        nodeRef={ref}
         onEntered={() => setAnimationComplete(true)}
         appear
         in