From 3871376d92cf6f4d7bfd7f7f624c169d324e47a8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 2 Sep 2022 10:22:07 +0200 Subject: [PATCH 1/3] Tooltip: use Popover s new anchor prop --- packages/components/src/tooltip/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js index bef68a9363a211..b8b028c52e6da5 100644 --- a/packages/components/src/tooltip/index.js +++ b/packages/components/src/tooltip/index.js @@ -60,7 +60,7 @@ const getRegularElement = ( { }; const addPopoverToGrandchildren = ( { - anchorRef, + anchor, grandchildren, isOver, offset, @@ -78,7 +78,7 @@ const addPopoverToGrandchildren = ( { aria-hidden="true" animate={ false } offset={ offset } - anchorRef={ anchorRef } + anchor={ anchor } __unstableShift > { text } @@ -253,7 +253,7 @@ function Tooltip( props ) { : getRegularElement; const popoverData = { - anchorRef: childRef, + anchor: childRef.current, isOver, offset: 4, position, From 47bc39f7eb47bc83c6ddc697be8ee066ba272862 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 2 Sep 2022 10:29:03 +0200 Subject: [PATCH 2/3] Use internal state to force re-renders when the anchor ref changes --- packages/components/src/tooltip/index.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js index b8b028c52e6da5..5e152b874b9282 100644 --- a/packages/components/src/tooltip/index.js +++ b/packages/components/src/tooltip/index.js @@ -9,7 +9,7 @@ import { concatChildren, useEffect, useState, - useRef, + useCallback, } from '@wordpress/element'; import { useDebounce, useMergeRefs } from '@wordpress/compose'; @@ -124,11 +124,16 @@ function Tooltip( props ) { const [ isMouseDown, setIsMouseDown ] = useState( false ); const [ isOver, setIsOver ] = useState( false ); const delayedSetIsOver = useDebounce( setIsOver, delay ); + // Using internal state (instead of a ref) for the popover anchor to make sure + // that the component re-renders when the anchor updates. + const [ popoverAnchor, setPopoverAnchor ] = useState(); // Create a reference to the Tooltip's child, to be passed to the Popover // so that the Tooltip can be correctly positioned. Also, merge with the // existing ref for the first child, so that its ref is preserved. - const childRef = useRef( null ); + const childRef = useCallback( ( node ) => { + setPopoverAnchor( node ?? undefined ); + }, [] ); const existingChildRef = Children.toArray( children )[ 0 ]?.ref; const mergedChildRefs = useMergeRefs( [ childRef, existingChildRef ] ); @@ -253,7 +258,7 @@ function Tooltip( props ) { : getRegularElement; const popoverData = { - anchor: childRef.current, + anchor: popoverAnchor, isOver, offset: 4, position, From 16d345ec1aaf03d0dccfc94b57c951345e87b74e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 5 Sep 2022 16:58:38 +0200 Subject: [PATCH 3/3] Simplify code --- packages/components/src/tooltip/index.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js index 5e152b874b9282..c2d438f4ad41ca 100644 --- a/packages/components/src/tooltip/index.js +++ b/packages/components/src/tooltip/index.js @@ -9,7 +9,6 @@ import { concatChildren, useEffect, useState, - useCallback, } from '@wordpress/element'; import { useDebounce, useMergeRefs } from '@wordpress/compose'; @@ -131,11 +130,11 @@ function Tooltip( props ) { // Create a reference to the Tooltip's child, to be passed to the Popover // so that the Tooltip can be correctly positioned. Also, merge with the // existing ref for the first child, so that its ref is preserved. - const childRef = useCallback( ( node ) => { - setPopoverAnchor( node ?? undefined ); - }, [] ); const existingChildRef = Children.toArray( children )[ 0 ]?.ref; - const mergedChildRefs = useMergeRefs( [ childRef, existingChildRef ] ); + const mergedChildRefs = useMergeRefs( [ + setPopoverAnchor, + existingChildRef, + ] ); const createMouseDown = ( event ) => { // In firefox, the mouse down event is also fired when the select @@ -258,7 +257,8 @@ function Tooltip( props ) { : getRegularElement; const popoverData = { - anchor: popoverAnchor, + // `anchor` should never be `null` + anchor: popoverAnchor ?? undefined, isOver, offset: 4, position,