Merge pull request Expensify#71876 from dmkt9/fix/71353

Fix/71353 - The tooltip does not follow the Manager's icon properly

Author: techievivek

src/components/SelectionListWithSections/BaseSelectionListItemRenderer.tsx

@@ -11,6 +11,7 @@ import type {BaseListItemProps, ExtendedTargetedEvent, ListItem, SelectionListPr
 type BaseSelectionListItemRendererProps<TItem extends ListItem> = Omit<BaseListItemProps<TItem>, 'onSelectRow'> &
     Pick<SelectionListProps<TItem>, 'ListItem' | 'shouldIgnoreFocus' | 'shouldSingleExecuteRowSelect' | 'canShowProductTrainingTooltip'> & {
         index: number;
+        sectionIndex?: number;
         selectRow: (item: TItem, indexToFocus?: number) => void;
         setFocusedIndex: ReturnType<typeof useArrowKeyFocusManager>[1];
         normalizedIndex: number;
@@ -27,6 +28,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
     ListItem,
     item,
     index,
+    sectionIndex,
     isFocused,
     isDisabled,
     showTooltip,
@@ -113,6 +115,7 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
                 userBillingFundID={userBillingFundID}
                 index={index}
                 shouldShowRightCaret={shouldShowRightCaret}
+                sectionIndex={sectionIndex}
             />
             {item.footerContent && item.footerContent}
         </>

src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx

@@ -658,6 +658,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
                     }}
                     shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark}
                     index={index}
+                    sectionIndex={section?.indexOffset}
                     isFocused={isItemFocused}
                     isDisabled={isDisabled}
                     showTooltip={shouldShowTooltips}

src/components/SelectionListWithSections/InviteMemberListItem.tsx

@@ -34,6 +34,8 @@ function InviteMemberListItem<TItem extends ListItem>({
     shouldSyncFocus,
     wrapperStyle,
     canShowProductTrainingTooltip = true,
+    index = 0,
+    sectionIndex = 0,
 }: InviteMemberListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -107,6 +109,7 @@ function InviteMemberListItem<TItem extends ListItem>({
                     shiftHorizontal={variables.inviteMemberListItemTooltipShiftHorizontal}
                     shouldHideOnNavigate
                     wrapperStyle={styles.productTrainingTooltipWrapper}
+                    uniqueID={`${sectionIndex}-${index}`}
                 >
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
                         {(!!item.reportID || !!accountID || !!item.text || !!item.alternateText) && (

src/components/SelectionListWithSections/types.ts

@@ -487,6 +487,8 @@ type TransactionSelectionListItem<TItem extends ListItem> = ListItemProps<TItem>
 type InviteMemberListItemProps<TItem extends ListItem> = UserListItemProps<TItem> & {
     /** Whether product training tooltips can be displayed */
     canShowProductTrainingTooltip?: boolean;
+    index?: number;
+    sectionIndex?: number;
 };
 
 type UserSelectionListItemProps<TItem extends ListItem> = UserListItemProps<TItem>;

src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

@@ -16,7 +16,7 @@ type LayoutChangeEventWithTarget = NativeSyntheticEvent<{layout: LayoutRectangle
  * A component used to wrap an element intended for displaying a tooltip.
  * This tooltip would show immediately without user's interaction and hide after 5 seconds.
  */
-function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNavigate = true, shouldHideOnScroll = false, ...props}: EducationalTooltipProps) {
+function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNavigate = true, shouldHideOnScroll = false, uniqueID, ...props}: EducationalTooltipProps) {
     const genericTooltipStateRef = useRef<GenericTooltipState | undefined>(undefined);
     const tooltipElementRef = useRef<Readonly<NativeMethods> | undefined>(undefined);
 
@@ -82,7 +82,7 @@ function BaseEducationalTooltip({children, shouldRender = false, shouldHideOnNav
             // This is necessary to ensure the tooltip is positioned correctly after resizing
             renderTooltip();
         }
-    }, [isResizing, renderTooltip, shouldRender]);
+    }, [isResizing, renderTooltip, shouldRender, uniqueID]);
 
     const setTooltipPosition = useCallback(
         (isScrolling: boolean) => {

src/components/Tooltip/types.ts

@@ -103,6 +103,8 @@ type EducationalTooltipProps = ChildrenProps &
 
         /** Whether the tooltip should hide during scrolling */
         shouldHideOnScroll?: boolean;
+
+        uniqueID?: string;
     };
 
 type TooltipExtendedProps = (EducationalTooltipProps | TooltipProps) & {