fix lhn not show tooltip

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 (
         <PressableWithSecondaryInteraction
@@ -81,7 +83,10 @@ function BaseAnchorForCommentsOnly({
             accessibilityLabel={href}
             wrapperStyle={wrapperStyle}
         >
-            <Tooltip text={linkHref}>
+            <Tooltip
+                text={linkHref}
+                isFocused={isFocused}
+            >
                 <Text
                     ref={linkRef}
                     style={StyleSheet.flatten([style, defaultTextStyle])}

src/components/Tooltip/BaseTooltip/index.tsx

@@ -1,4 +1,3 @@
-import {useIsFocused} from '@react-navigation/native';
 import {BoundsObserver} from '@react-ng/bounds-observer';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, memo, useCallback, useRef} from 'react';
@@ -49,10 +48,9 @@ function chooseBoundingBox(target: HTMLElement, clientX: number, clientY: number
     return target.getBoundingClientRect();
 }
 
-function Tooltip({children, shouldHandleScroll = false, ...props}: TooltipProps, ref: ForwardedRef<BoundsObserver>) {
+function Tooltip({children, shouldHandleScroll = false, isFocused, ...props}: TooltipProps, ref: ForwardedRef<BoundsObserver>) {
     const target = useRef<HTMLElement | null>(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 === false) {
         return children;
     }
 

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 &