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 1f60560be5ff..7ef80c552980 100644 --- a/src/components/Tooltip/BaseTooltip.js +++ b/src/components/Tooltip/BaseTooltip.js @@ -52,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(); @@ -197,6 +197,7 @@ function Tooltip({children, numberOfLines, maxWidth, text, renderTooltipContent, { + // eslint-disable-next-line + const tooltipNode = tooltipRef.current ? tooltipRef.current._childNode : null; + if ( + isOpen && + popover && + popover.anchorRef && + 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..684a102e0339 100644 --- a/src/components/Tooltip/tooltipPropTypes.js +++ b/src/components/Tooltip/tooltipPropTypes.js @@ -1,4 +1,5 @@ import PropTypes from 'prop-types'; +import refPropTypes from '../refPropTypes'; import variables from '../../styles/variables'; import CONST from '../../CONST'; @@ -31,6 +32,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: refPropTypes, }; const defaultProps = { @@ -42,6 +46,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';