diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.tsx b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.tsx index c61b624d96e3..7a0516994b4e 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.tsx +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.tsx @@ -1,3 +1,4 @@ +import {useIsFocused} from '@react-navigation/native'; import {Str} from 'expensify-common'; import React, {useEffect, useRef} from 'react'; // eslint-disable-next-line no-restricted-imports @@ -53,6 +54,7 @@ function BaseAnchorForCommentsOnly({ const defaultTextStyle = canUseTouchScreen() || shouldUseNarrowLayout ? {} : {...styles.userSelectText, ...styles.cursorPointer}; const isEmail = Str.isValidEmail(href.replace(/mailto:/i, '')); const linkHref = !linkHasImage ? href : undefined; + const isFocused = useIsFocused(); return ( - + ) { +function Tooltip({children, shouldHandleScroll = false, isFocused = true, ...props}: TooltipProps, ref: ForwardedRef) { const target = useRef(null); const initialMousePosition = useRef({x: 0, y: 0}); - const isFocused = useIsFocused(); const updateTargetAndMousePosition = useCallback((e: MouseEvent) => { if (!(e.currentTarget instanceof HTMLElement)) { @@ -87,8 +85,13 @@ function Tooltip({children, shouldHandleScroll = false, ...props}: TooltipProps, [children, updateTargetAndMousePosition], ); - // Skip the tooltip and return the children if the device does not support hovering or if navigation does not focus. - if (!hasHoverSupport || !isFocused) { + // Skip the tooltip and return the children if the device does not support hovering + if (!hasHoverSupport) { + return children; + } + + // Skip the tooltip and return the children if navigation does not focus. + if (!isFocused) { return children; } diff --git a/src/components/Tooltip/types.ts b/src/components/Tooltip/types.ts index ec08c815eb92..c34e86b528b3 100644 --- a/src/components/Tooltip/types.ts +++ b/src/components/Tooltip/types.ts @@ -78,6 +78,9 @@ type TooltipProps = ChildrenProps & SharedTooltipProps & { /** passes this down to Hoverable component to decide whether to handle the scroll behaviour to show hover once the scroll ends */ shouldHandleScroll?: boolean; + + /** Whether the current screen or component is actively focused via navigation */ + isFocused?: boolean; }; type EducationalTooltipProps = ChildrenProps &