fix skip tooltip rendering when element is not focused

src/components/Tooltip/BaseTooltip/index.tsx

@@ -1,18 +1,17 @@
+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';
 import type {LayoutRectangle} from 'react-native';
 import Hoverable from '@components/Hoverable';
 import GenericTooltip from '@components/Tooltip/GenericTooltip';
 import type TooltipProps from '@components/Tooltip/types';
-import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import {hasHoverSupport} from '@libs/DeviceCapabilities';
 
 type MouseEvents = {
     onMouseEnter: (e: MouseEvent) => void | undefined;
 };
 
-const hasHoverSupport = DeviceCapabilities.hasHoverSupport();
-
 /**
  * A component used to wrap an element intended for displaying a tooltip. The term "tooltip's target" refers to the
  * wrapped element, which, upon hover, triggers the tooltip to be shown.
@@ -53,6 +52,7 @@ function chooseBoundingBox(target: HTMLElement, clientX: number, clientY: number
 function Tooltip({children, shouldHandleScroll = false, ...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 +87,8 @@ function Tooltip({children, shouldHandleScroll = false, ...props}: TooltipProps,
         [children, updateTargetAndMousePosition],
     );
 
-    // Skip the tooltip and return the children if the device does not support hovering
-    if (!hasHoverSupport) {
+    // If the device doesn't support hover or the element isn't focused, skip rendering the tooltip and just return the children.
+    if (!hasHoverSupport || !isFocused) {
         return children;
     }