From 7c353856d913c54414cc64783a51d9b7ff7ae893 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Tue, 26 Sep 2023 06:09:55 +0500 Subject: [PATCH 1/7] fix: popover interaction with tooltip --- src/components/Tooltip/index.js | 39 +++++++++++++++++++++++++++++++-- 1 file changed, 37 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js index f60982f52dd4..3fa1d8eea869 100644 --- a/src/components/Tooltip/index.js +++ b/src/components/Tooltip/index.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {memo, useCallback, useEffect, useRef, useState} from 'react'; +import React, {memo, useCallback, useEffect, useRef, useState, useContext, useMemo} from 'react'; import {Animated} from 'react-native'; import {BoundsObserver} from '@react-ng/bounds-observer'; import TooltipRenderedOnPageBody from './TooltipRenderedOnPageBody'; @@ -7,6 +7,7 @@ import Hoverable from '../Hoverable'; import * as tooltipPropTypes from './tooltipPropTypes'; import TooltipSense from './TooltipSense'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; +import {PopoverContext} from '../PopoverProvider'; import usePrevious from '../../hooks/usePrevious'; import useLocalize from '../../hooks/useLocalize'; import useWindowDimensions from '../../hooks/useWindowDimensions'; @@ -25,6 +26,8 @@ function Tooltip(props) { const {preferredLocale} = useLocalize(); const {windowWidth} = useWindowDimensions(); + const {isOpen, popover} = useContext(PopoverContext); + // Is tooltip already rendered on the page's body? happens once. const [isRendered, setIsRendered] = useState(false); // Is the tooltip currently visible? @@ -43,6 +46,30 @@ function Tooltip(props) { const isAnimationCanceled = useRef(false); const prevText = usePrevious(text); + const tooltipRef = useRef(null); + + const isPopoverRelatedToTooltipOpen = useMemo(() => { + // eslint-disable-next-line + const tooltipNode = tooltipRef.current ? tooltipRef.current._childNode : null; + if ( + isOpen && + popover && + popover.anchorRef.current && + tooltipNode && + ( + tooltipNode.contains(popover.anchorRef.current) || + tooltipNode === popover.anchorRef.current + ) + ) { + return true; + } + + return false; + + }, [isOpen, popover]); + + const previousPopoverOpen = usePrevious(isPopoverRelatedToTooltipOpen); + /** * Display the tooltip in an animation. */ @@ -120,9 +147,16 @@ function Tooltip(props) { setIsVisible(false); }; + useEffect(() => { + if (isPopoverRelatedToTooltipOpen && !previousPopoverOpen) { + return; + } + hideTooltip(); + }, [isPopoverRelatedToTooltipOpen, previousPopoverOpen]); + // Skip the tooltip and return the children if the text is empty, // we don't have a render function or the device does not support hovering - if ((_.isEmpty(text) && renderTooltipContent == null) || !hasHoverSupport) { + if ((_.isEmpty(text) && renderTooltipContent == null) || !hasHoverSupport || isPopoverRelatedToTooltipOpen) { return children; } @@ -150,6 +184,7 @@ function Tooltip(props) { Date: Sat, 14 Oct 2023 04:20:55 +0500 Subject: [PATCH 2/7] fix: re-add tooltip logic --- src/components/Tooltip/BaseTooltip.js | 36 +++++++++++++++++++++++++++ 1 file changed, 36 insertions(+) diff --git a/src/components/Tooltip/BaseTooltip.js b/src/components/Tooltip/BaseTooltip.js index 50ade2026bae..98874cf1829b 100644 --- a/src/components/Tooltip/BaseTooltip.js +++ b/src/components/Tooltip/BaseTooltip.js @@ -3,6 +3,7 @@ import React, {memo, useCallback, useEffect, useRef, useState} from 'react'; import {Animated} from 'react-native'; import {BoundsObserver} from '@react-ng/bounds-observer'; import Str from 'expensify-common/lib/str'; +import {PopoverContext} from '../PopoverProvider'; import TooltipRenderedOnPageBody from './TooltipRenderedOnPageBody'; import Hoverable from '../Hoverable'; import * as tooltipPropTypes from './tooltipPropTypes'; @@ -68,6 +69,8 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, const [wrapperWidth, setWrapperWidth] = useState(0); const [wrapperHeight, setWrapperHeight] = useState(0); + const {isOpen, popover} = useContext(PopoverContext); + // Whether the tooltip is first tooltip to activate the TooltipSense const isTooltipSenseInitiator = useRef(false); const animation = useRef(new Animated.Value(0)); @@ -82,6 +85,31 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, initialMousePosition.current = {x: e.clientX, y: e.clientY}; }, []); + const tooltipRef = useRef(null); + + const isPopoverRelatedToTooltipOpen = useMemo(() => { + // eslint-disable-next-line + const tooltipNode = tooltipRef.current ? tooltipRef.current._childNode : null; + if ( + isOpen && + popover && + popover.anchorRef.current && + tooltipNode && + ( + tooltipNode.contains(popover.anchorRef.current) || + tooltipNode === popover.anchorRef.current + ) + ) { + return true; + } + + return false; + + }, [isOpen, popover]); + + const previousPopoverOpen = usePrevious(isPopoverRelatedToTooltipOpen); + + /** * Display the tooltip in an animation. */ @@ -164,6 +192,13 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, setIsVisible(false); }; + useEffect(() => { + if (isPopoverRelatedToTooltipOpen && !previousPopoverOpen) { + return; + } + hideTooltip(); + }, [isPopoverRelatedToTooltipOpen, previousPopoverOpen]); + // Skip the tooltip and return the children if the text is empty, // we don't have a render function or the device does not support hovering if ((_.isEmpty(text) && renderTooltipContent == null) || !hasHoverSupport) { @@ -194,6 +229,7 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, Date: Sat, 14 Oct 2023 04:50:09 +0500 Subject: [PATCH 3/7] fix: add missing condition for tooltip popover --- src/components/Tooltip/BaseTooltip.js | 17 +++-------------- 1 file changed, 3 insertions(+), 14 deletions(-) diff --git a/src/components/Tooltip/BaseTooltip.js b/src/components/Tooltip/BaseTooltip.js index 98874cf1829b..e56fb2475231 100644 --- a/src/components/Tooltip/BaseTooltip.js +++ b/src/components/Tooltip/BaseTooltip.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React, {memo, useCallback, useEffect, useRef, useState} from 'react'; +import React, {memo, useCallback, useEffect, useRef, useState, useContext, useMemo} from 'react'; import {Animated} from 'react-native'; import {BoundsObserver} from '@react-ng/bounds-observer'; import Str from 'expensify-common/lib/str'; @@ -90,26 +90,15 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, const isPopoverRelatedToTooltipOpen = useMemo(() => { // eslint-disable-next-line const tooltipNode = tooltipRef.current ? tooltipRef.current._childNode : null; - if ( - isOpen && - popover && - popover.anchorRef.current && - tooltipNode && - ( - tooltipNode.contains(popover.anchorRef.current) || - tooltipNode === popover.anchorRef.current - ) - ) { + if (isOpen && popover && popover.anchorRef.current && tooltipNode && (tooltipNode.contains(popover.anchorRef.current) || tooltipNode === popover.anchorRef.current)) { return true; } return false; - }, [isOpen, popover]); const previousPopoverOpen = usePrevious(isPopoverRelatedToTooltipOpen); - /** * Display the tooltip in an animation. */ @@ -201,7 +190,7 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, // Skip the tooltip and return the children if the text is empty, // we don't have a render function or the device does not support hovering - if ((_.isEmpty(text) && renderTooltipContent == null) || !hasHoverSupport) { + if ((_.isEmpty(text) && renderTooltipContent == null) || !hasHoverSupport || isPopoverRelatedToTooltipOpen) { return children; } From 824f7ea8d82bcefb00376acef45a525ad58b78c0 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 23 Oct 2023 00:57:46 +0500 Subject: [PATCH 4/7] feat: popover anchor tooltip component --- src/components/AvatarWithImagePicker.js | 2 +- src/components/BaseMiniContextMenuItem.js | 2 +- .../EmojiPicker/EmojiPickerButton.js | 2 +- src/components/FloatingActionButton.js | 2 +- src/components/Reactions/AddReactionBubble.js | 2 +- src/components/ThreeDotsMenu/index.js | 2 +- src/components/Tooltip/BaseTooltip.js | 30 ++--------- .../Tooltip/PopoverAnchorTooltip.js | 53 +++++++++++++++++++ src/components/Tooltip/tooltipPropTypes.js | 4 ++ .../BaseVideoChatButtonAndMenu.js | 2 +- .../AttachmentPickerWithMenuItems.js | 2 +- 11 files changed, 68 insertions(+), 35 deletions(-) create mode 100644 src/components/Tooltip/PopoverAnchorTooltip.js diff --git a/src/components/AvatarWithImagePicker.js b/src/components/AvatarWithImagePicker.js index a44d1841bbb6..aa5809375a47 100644 --- a/src/components/AvatarWithImagePicker.js +++ b/src/components/AvatarWithImagePicker.js @@ -16,7 +16,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize'; import variables from '../styles/variables'; import CONST from '../CONST'; import SpinningIndicatorAnimation from '../styles/animation/SpinningIndicatorAnimation'; -import Tooltip from './Tooltip'; +import Tooltip from './Tooltip/PopoverAnchorTooltip'; import stylePropTypes from '../styles/stylePropTypes'; import * as FileUtils from '../libs/fileDownload/FileUtils'; import getImageResolution from '../libs/fileDownload/getImageResolution'; diff --git a/src/components/BaseMiniContextMenuItem.js b/src/components/BaseMiniContextMenuItem.js index 3c423ffc80ea..ffbc5ee76d98 100644 --- a/src/components/BaseMiniContextMenuItem.js +++ b/src/components/BaseMiniContextMenuItem.js @@ -6,7 +6,7 @@ import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; import getButtonState from '../libs/getButtonState'; import variables from '../styles/variables'; -import Tooltip from './Tooltip'; +import Tooltip from './Tooltip/PopoverAnchorTooltip'; import PressableWithoutFeedback from './Pressable/PressableWithoutFeedback'; import ReportActionComposeFocusManager from '../libs/ReportActionComposeFocusManager'; import DomUtils from '../libs/DomUtils'; diff --git a/src/components/EmojiPicker/EmojiPickerButton.js b/src/components/EmojiPicker/EmojiPickerButton.js index cbfc3517117c..0d1426cbf987 100644 --- a/src/components/EmojiPicker/EmojiPickerButton.js +++ b/src/components/EmojiPicker/EmojiPickerButton.js @@ -4,7 +4,7 @@ import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import getButtonState from '../../libs/getButtonState'; import * as Expensicons from '../Icon/Expensicons'; -import Tooltip from '../Tooltip'; +import Tooltip from '../Tooltip/PopoverAnchorTooltip'; import Icon from '../Icon'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import * as EmojiPickerAction from '../../libs/actions/EmojiPickerAction'; diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js index d6f5b907ace0..ef97cd1822a2 100644 --- a/src/components/FloatingActionButton.js +++ b/src/components/FloatingActionButton.js @@ -6,7 +6,7 @@ import * as Expensicons from './Icon/Expensicons'; import styles from '../styles/styles'; import * as StyleUtils from '../styles/StyleUtils'; import themeColors from '../styles/themes/default'; -import Tooltip from './Tooltip'; +import Tooltip from './Tooltip/PopoverAnchorTooltip'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; import variables from '../styles/variables'; diff --git a/src/components/Reactions/AddReactionBubble.js b/src/components/Reactions/AddReactionBubble.js index 656188559334..8a862c7e1b96 100644 --- a/src/components/Reactions/AddReactionBubble.js +++ b/src/components/Reactions/AddReactionBubble.js @@ -1,7 +1,7 @@ import React, {useRef, useEffect} from 'react'; import {View} from 'react-native'; import PropTypes from 'prop-types'; -import Tooltip from '../Tooltip'; +import Tooltip from '../Tooltip/PopoverAnchorTooltip'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import Icon from '../Icon'; diff --git a/src/components/ThreeDotsMenu/index.js b/src/components/ThreeDotsMenu/index.js index c07a3fc8ee44..3aac98fa1275 100644 --- a/src/components/ThreeDotsMenu/index.js +++ b/src/components/ThreeDotsMenu/index.js @@ -6,7 +6,7 @@ import Icon from '../Icon'; import PopoverMenu from '../PopoverMenu'; import styles from '../../styles/styles'; import useLocalize from '../../hooks/useLocalize'; -import Tooltip from '../Tooltip'; +import Tooltip from '../Tooltip/PopoverAnchorTooltip'; import * as Expensicons from '../Icon/Expensicons'; import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes'; import CONST from '../../CONST'; diff --git a/src/components/Tooltip/BaseTooltip.js b/src/components/Tooltip/BaseTooltip.js index 9b9d35b6605c..7ef80c552980 100644 --- a/src/components/Tooltip/BaseTooltip.js +++ b/src/components/Tooltip/BaseTooltip.js @@ -1,9 +1,8 @@ import _ from 'underscore'; -import React, {memo, useCallback, useEffect, useRef, useState, useContext, useMemo} from 'react'; +import React, {memo, useCallback, useEffect, useRef, useState} from 'react'; import {Animated} from 'react-native'; import {BoundsObserver} from '@react-ng/bounds-observer'; import Str from 'expensify-common/lib/str'; -import {PopoverContext} from '../PopoverProvider'; import TooltipRenderedOnPageBody from './TooltipRenderedOnPageBody'; import Hoverable from '../Hoverable'; import * as tooltipPropTypes from './tooltipPropTypes'; @@ -53,7 +52,7 @@ function chooseBoundingBox(target, clientX, clientY) { return target.getBoundingClientRect(); } -function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, renderTooltipContentKey, shouldHandleScroll, shiftHorizontal, shiftVertical}) { +function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, renderTooltipContentKey, shouldHandleScroll, shiftHorizontal, shiftVertical, tooltipRef}) { const {preferredLocale} = useLocalize(); const {windowWidth} = useWindowDimensions(); @@ -69,8 +68,6 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, const [wrapperWidth, setWrapperWidth] = useState(0); const [wrapperHeight, setWrapperHeight] = useState(0); - const {isOpen, popover} = useContext(PopoverContext); - // Whether the tooltip is first tooltip to activate the TooltipSense const isTooltipSenseInitiator = useRef(false); const animation = useRef(new Animated.Value(0)); @@ -85,20 +82,6 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, initialMousePosition.current = {x: e.clientX, y: e.clientY}; }, []); - const tooltipRef = useRef(null); - - const isPopoverRelatedToTooltipOpen = useMemo(() => { - // eslint-disable-next-line - const tooltipNode = tooltipRef.current ? tooltipRef.current._childNode : null; - if (isOpen && popover && popover.anchorRef.current && tooltipNode && (tooltipNode.contains(popover.anchorRef.current) || tooltipNode === popover.anchorRef.current)) { - return true; - } - - return false; - }, [isOpen, popover]); - - const previousPopoverOpen = usePrevious(isPopoverRelatedToTooltipOpen); - /** * Display the tooltip in an animation. */ @@ -184,16 +167,9 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, setIsVisible(false); }, []); - useEffect(() => { - if (isPopoverRelatedToTooltipOpen && !previousPopoverOpen) { - return; - } - hideTooltip(); - }, [isPopoverRelatedToTooltipOpen, previousPopoverOpen]); - // Skip the tooltip and return the children if the text is empty, // we don't have a render function or the device does not support hovering - if ((_.isEmpty(text) && renderTooltipContent == null) || !hasHoverSupport || isPopoverRelatedToTooltipOpen) { + if ((_.isEmpty(text) && renderTooltipContent == null) || !hasHoverSupport) { return children; } diff --git a/src/components/Tooltip/PopoverAnchorTooltip.js b/src/components/Tooltip/PopoverAnchorTooltip.js new file mode 100644 index 000000000000..7d5d1e616c14 --- /dev/null +++ b/src/components/Tooltip/PopoverAnchorTooltip.js @@ -0,0 +1,53 @@ +import React, {useContext, useRef, useMemo} from 'react'; +import PropTypes from 'prop-types'; +import {propTypes as tooltipPropTypes, defaultProps as tooltipDefaultProps} from './tooltipPropTypes'; +import BaseTooltip from './BaseTooltip'; +import {PopoverContext} from '../PopoverProvider'; + +const propTypes = { + ...tooltipPropTypes, + + /** Whether the actual Tooltip should be rendered. If false, it's just going to return the children */ + shouldRender: PropTypes.bool, +}; + +const defaultProps = { + ...tooltipDefaultProps, + shouldRender: true, +}; + +function PopoverAnchorTooltip({shouldRender, children, ...props}) { + const {isOpen, popover} = useContext(PopoverContext); + + const tooltipRef = useRef(null); + + const isPopoverRelatedToTooltipOpen = useMemo(() => { + // eslint-disable-next-line + const tooltipNode = tooltipRef.current ? tooltipRef.current._childNode : null; + if (isOpen && popover && popover.anchorRef.current && tooltipNode && (tooltipNode.contains(popover.anchorRef.current) || tooltipNode === popover.anchorRef.current)) { + return true; + } + + return false; + }, [isOpen, popover]); + + if (!shouldRender || isPopoverRelatedToTooltipOpen) { + return children; + } + + return ( + + {children} + + ); +} + +PopoverAnchorTooltip.displayName = 'PopoverAnchorTooltip'; +PopoverAnchorTooltip.propTypes = propTypes; +PopoverAnchorTooltip.defaultProps = defaultProps; + +export default PopoverAnchorTooltip; diff --git a/src/components/Tooltip/tooltipPropTypes.js b/src/components/Tooltip/tooltipPropTypes.js index 2ddf8120d58c..7319f87ecc9c 100644 --- a/src/components/Tooltip/tooltipPropTypes.js +++ b/src/components/Tooltip/tooltipPropTypes.js @@ -31,6 +31,9 @@ const propTypes = { /** passes this down to Hoverable component to decide whether to handle the scroll behaviour to show hover once the scroll ends */ shouldHandleScroll: PropTypes.bool, + + /** Reference to the tooltip container */ + tooltipRef: PropTypes.any, }; const defaultProps = { @@ -42,6 +45,7 @@ const defaultProps = { renderTooltipContent: undefined, renderTooltipContentKey: [], shouldHandleScroll: false, + tooltipRef: () => {}, }; export {propTypes, defaultProps}; diff --git a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js index d89c9bc7a953..ed1b71c8fb0f 100755 --- a/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js +++ b/src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js @@ -14,7 +14,7 @@ import themeColors from '../../styles/themes/default'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; import withLocalize, {withLocalizePropTypes} from '../withLocalize'; import compose from '../../libs/compose'; -import Tooltip from '../Tooltip'; +import Tooltip from '../Tooltip/PopoverAnchorTooltip'; import {propTypes as videoChatButtonAndMenuPropTypes, defaultProps} from './videoChatButtonAndMenuPropTypes'; import * as Session from '../../libs/actions/Session'; import PressableWithoutFeedback from '../Pressable/PressableWithoutFeedback'; diff --git a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js index 6522bedc825a..36cd9428b738 100644 --- a/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js +++ b/src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.js @@ -10,7 +10,7 @@ import AttachmentPicker from '../../../../components/AttachmentPicker'; import * as Report from '../../../../libs/actions/Report'; import PopoverMenu from '../../../../components/PopoverMenu'; import CONST from '../../../../CONST'; -import Tooltip from '../../../../components/Tooltip'; +import Tooltip from '../../../../components/Tooltip/PopoverAnchorTooltip'; import * as Browser from '../../../../libs/Browser'; import PressableWithFeedback from '../../../../components/Pressable/PressableWithFeedback'; import useLocalize from '../../../../hooks/useLocalize'; From 85aed6f65b17a1468f24641d2da0d0827428c07a Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 23 Oct 2023 01:51:04 +0500 Subject: [PATCH 5/7] feat: use correct prop type --- src/components/Tooltip/tooltipPropTypes.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Tooltip/tooltipPropTypes.js b/src/components/Tooltip/tooltipPropTypes.js index 7319f87ecc9c..9bed7cb399dd 100644 --- a/src/components/Tooltip/tooltipPropTypes.js +++ b/src/components/Tooltip/tooltipPropTypes.js @@ -1,4 +1,5 @@ import PropTypes from 'prop-types'; +import refPropType from '../refPropTypes'; import variables from '../../styles/variables'; import CONST from '../../CONST'; @@ -33,7 +34,7 @@ const propTypes = { shouldHandleScroll: PropTypes.bool, /** Reference to the tooltip container */ - tooltipRef: PropTypes.any, + tooltipRef: refPropType, }; const defaultProps = { From 21cca81d87a11a06fdee1e2c4d232d7e7d33b8fe Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 23 Oct 2023 06:27:06 +0500 Subject: [PATCH 6/7] feat: use plural name for ref prop types --- src/components/Tooltip/tooltipPropTypes.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/tooltipPropTypes.js b/src/components/Tooltip/tooltipPropTypes.js index 9bed7cb399dd..684a102e0339 100644 --- a/src/components/Tooltip/tooltipPropTypes.js +++ b/src/components/Tooltip/tooltipPropTypes.js @@ -1,5 +1,5 @@ import PropTypes from 'prop-types'; -import refPropType from '../refPropTypes'; +import refPropTypes from '../refPropTypes'; import variables from '../../styles/variables'; import CONST from '../../CONST'; @@ -34,7 +34,7 @@ const propTypes = { shouldHandleScroll: PropTypes.bool, /** Reference to the tooltip container */ - tooltipRef: refPropType, + tooltipRef: refPropTypes, }; const defaultProps = { From 6316669b38c6a5c3d0e782b6669a20c53ed8df70 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Tue, 24 Oct 2023 02:43:07 +0500 Subject: [PATCH 7/7] fix: add check to see if ref is defined --- src/components/Tooltip/PopoverAnchorTooltip.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/Tooltip/PopoverAnchorTooltip.js b/src/components/Tooltip/PopoverAnchorTooltip.js index 7d5d1e616c14..bca49ac9b7bc 100644 --- a/src/components/Tooltip/PopoverAnchorTooltip.js +++ b/src/components/Tooltip/PopoverAnchorTooltip.js @@ -18,13 +18,19 @@ const defaultProps = { function PopoverAnchorTooltip({shouldRender, children, ...props}) { const {isOpen, popover} = useContext(PopoverContext); - const tooltipRef = useRef(null); const isPopoverRelatedToTooltipOpen = useMemo(() => { // eslint-disable-next-line const tooltipNode = tooltipRef.current ? tooltipRef.current._childNode : null; - if (isOpen && popover && popover.anchorRef.current && tooltipNode && (tooltipNode.contains(popover.anchorRef.current) || tooltipNode === popover.anchorRef.current)) { + if ( + isOpen && + popover && + popover.anchorRef && + popover.anchorRef.current && + tooltipNode && + (tooltipNode.contains(popover.anchorRef.current) || tooltipNode === popover.anchorRef.current) + ) { return true; }