IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

CSSTransition fixes warnings (#55340)

Browse Source
This commit is contained in:
Torkel Ödegaard
2022-09-20 11:47:31 +02:00
committed by GitHub
parent c088f2be50
commit 10b3c0787a
4 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/app/features/search/components/DashboardSearchModal.tsx
View File

@@ -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