Fix/73489 - Two dates highlighted when scrolling date list with keyboard arrows on Freq list

src/components/SelectionList/BaseSelectionList.tsx

@@ -76,6 +76,8 @@ function BaseSelectionList<TItem extends ListItem>({
     shouldPreventDefaultFocusOnSelectRow = false,
     shouldShowTextInput = !!textInputOptions?.label,
     shouldHighlightSelectedItem = true,
+    shouldDisableHoverStyle = false,
+    setShouldDisableHoverStyle = () => {},
 }: SelectionListProps<TItem>) {
     const styles = useThemeStyles();
     const isFocused = useIsFocused();
@@ -152,7 +154,11 @@ function BaseSelectionList<TItem extends ListItem>({
 
     const debouncedScrollToIndex = useDebounce(scrollToIndex, CONST.TIMING.LIST_SCROLLING_DEBOUNCE_TIME, {leading: true, trailing: true});
 
-    const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
+    const onArrowUpDownCallback = useCallback(() => {
+        setShouldDisableHoverStyle(true);
+    }, [setShouldDisableHoverStyle]);
+
+    const [focusedIndex, setFocusedIndex, currentHoverIndexRef] = useArrowKeyFocusManager({
         initialFocusedIndex,
         maxIndex: data.length - 1,
         disabledIndexes: dataDetails.disabledArrowKeyIndexes,
@@ -166,6 +172,7 @@ function BaseSelectionList<TItem extends ListItem>({
         },
         ...(!hasKeyBeenPressed.current && {setHasKeyBeenPressed}),
         isFocused,
+        onArrowUpDownCallback,
     });
 
     const selectRow = useCallback(
@@ -287,37 +294,58 @@ function BaseSelectionList<TItem extends ListItem>({
         );
     };
 
+    const setCurrentHoverIndex = useCallback(
+        (hoverIndex: number | null) => {
+            if (shouldDisableHoverStyle) {
+                return;
+            }
+            currentHoverIndexRef.current = hoverIndex;
+        },
+        [currentHoverIndexRef, shouldDisableHoverStyle],
+    );
+
     const renderItem: ListRenderItem<TItem> = ({item, index}: ListRenderItemInfo<TItem>) => {
         const isItemDisabled = isDisabled || item.isDisabled;
         const selected = isItemSelected(item);
         const isItemFocused = (!isDisabled || selected) && focusedIndex === index;
 
         return (
-            <ListItemRenderer
-                ListItem={ListItem}
-                selectRow={selectRow}
-                keyForList={item.keyForList}
-                showTooltip={shouldShowTooltips}
-                item={item}
-                setFocusedIndex={setFocusedIndex}
-                index={index}
-                normalizedIndex={index}
-                isFocused={isItemFocused}
-                isDisabled={isItemDisabled}
-                canSelectMultiple={canSelectMultiple}
-                shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect}
-                shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
-                rightHandSideComponent={rightHandSideComponent}
-                isMultilineSupported={isRowMultilineSupported}
-                isAlternateTextMultilineSupported={(alternateNumberOfSupportedLines ?? 0) > 1}
-                alternateTextNumberOfLines={alternateNumberOfSupportedLines}
-                shouldIgnoreFocus={shouldIgnoreFocus}
-                wrapperStyle={style?.listItemWrapperStyle}
-                titleStyles={style?.listItemTitleStyles}
-                singleExecution={singleExecution}
-                shouldHighlightSelectedItem={shouldHighlightSelectedItem}
-                shouldSyncFocus={!isTextInputFocusedRef.current && hasKeyBeenPressed.current}
-            />
+            <View
+                onMouseMove={() => setCurrentHoverIndex(index)}
+                onMouseEnter={() => setCurrentHoverIndex(index)}
+                onMouseLeave={(e) => {
+                    e.stopPropagation();
+                    setCurrentHoverIndex(null);
+                }}
+            >
+                <ListItemRenderer
+                    ListItem={ListItem}
+                    selectRow={selectRow}
+                    keyForList={item.keyForList}
+                    showTooltip={shouldShowTooltips}
+                    item={item}
+                    setFocusedIndex={setFocusedIndex}
+                    index={index}
+                    normalizedIndex={index}
+                    isFocused={isItemFocused}
+                    isDisabled={isItemDisabled}
+                    canSelectMultiple={canSelectMultiple}
+                    shouldSingleExecuteRowSelect={shouldSingleExecuteRowSelect}
+                    shouldPreventDefaultFocusOnSelectRow={shouldPreventDefaultFocusOnSelectRow}
+                    rightHandSideComponent={rightHandSideComponent}
+                    isMultilineSupported={isRowMultilineSupported}
+                    isAlternateTextMultilineSupported={(alternateNumberOfSupportedLines ?? 0) > 1}
+                    alternateTextNumberOfLines={alternateNumberOfSupportedLines}
+                    shouldIgnoreFocus={shouldIgnoreFocus}
+                    wrapperStyle={style?.listItemWrapperStyle}
+                    titleStyles={style?.listItemTitleStyles}
+                    singleExecution={singleExecution}
+                    shouldHighlightSelectedItem={shouldHighlightSelectedItem}
+                    shouldSyncFocus={!isTextInputFocusedRef.current && hasKeyBeenPressed.current}
+                    shouldDisableHoverStyle={shouldDisableHoverStyle}
+                    shouldStopMouseLeavePropagation={false}
+                />
+            </View>
         );
     };
 

src/components/SelectionList/ListItem/BaseListItem.tsx

@@ -2,6 +2,7 @@ import React, {useRef} from 'react';
 import {View} from 'react-native';
 import {getButtonRole} from '@components/Button/utils';
 import Icon from '@components/Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
@@ -42,6 +43,8 @@ function BaseListItem<TItem extends ListItem>({
     testID,
     shouldUseDefaultRightHandSideCheckmark = true,
     shouldHighlightSelectedItem = true,
+    shouldDisableHoverStyle,
+    shouldStopMouseLeavePropagation = true,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -55,7 +58,9 @@ function BaseListItem<TItem extends ListItem>({
     useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus);
     const handleMouseLeave = (e: React.MouseEvent<Element, MouseEvent>) => {
         bind.onMouseLeave();
-        e.stopPropagation();
+        if (shouldStopMouseLeavePropagation) {
+            e.stopPropagation();
+        }
         setMouseUp();
     };
 
@@ -103,7 +108,7 @@ function BaseListItem<TItem extends ListItem>({
                 isNested
                 hoverDimmingValue={1}
                 pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}
-                hoverStyle={[!item.isDisabled && item.isInteractive !== false && styles.hoveredComponentBG, hoverStyle]}
+                hoverStyle={!shouldDisableHoverStyle ? [!item.isDisabled && item.isInteractive !== false && styles.hoveredComponentBG, hoverStyle] : undefined}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: shouldShowBlueBorderOnFocus}}
                 onMouseDown={(e) => e.preventDefault()}
                 id={keyForList ?? ''}

src/components/SelectionList/ListItem/ListItemRenderer.tsx

@@ -47,6 +47,8 @@ function ListItemRenderer<TItem extends ListItem>({
     titleContainerStyles,
     shouldUseDefaultRightHandSideCheckmark,
     shouldHighlightSelectedItem,
+    shouldDisableHoverStyle,
+    shouldStopMouseLeavePropagation,
 }: ListItemRendererProps<TItem>) {
     const handleOnCheckboxPress = () => {
         if (isTransactionGroupListItemType(item)) {
@@ -98,6 +100,8 @@ function ListItemRenderer<TItem extends ListItem>({
                 titleContainerStyles={titleContainerStyles}
                 shouldUseDefaultRightHandSideCheckmark={shouldUseDefaultRightHandSideCheckmark}
                 shouldHighlightSelectedItem={shouldHighlightSelectedItem}
+                shouldDisableHoverStyle={shouldDisableHoverStyle}
+                shouldStopMouseLeavePropagation={shouldStopMouseLeavePropagation}
             />
             {item.footerContent && item.footerContent}
         </>

src/components/SelectionList/ListItem/RadioListItem.tsx

@@ -24,6 +24,8 @@ function RadioListItem<TItem extends ListItem>({
     wrapperStyle,
     titleStyles,
     shouldHighlightSelectedItem = true,
+    shouldDisableHoverStyle,
+    shouldStopMouseLeavePropagation,
 }: RadioListItemProps<TItem>) {
     const styles = useThemeStyles();
     const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
@@ -47,6 +49,8 @@ function RadioListItem<TItem extends ListItem>({
             shouldSyncFocus={shouldSyncFocus}
             pendingAction={item.pendingAction}
             shouldHighlightSelectedItem={shouldHighlightSelectedItem}
+            shouldDisableHoverStyle={shouldDisableHoverStyle}
+            shouldStopMouseLeavePropagation={shouldStopMouseLeavePropagation}
         >
             <>
                 {!!item.leftElement && item.leftElement}

src/components/SelectionList/ListItem/types.ts

@@ -236,6 +236,12 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
 
     /** Whether to highlight the selected item */
     shouldHighlightSelectedItem?: boolean;
+
+    /** Whether to disable the hover style of the item */
+    shouldDisableHoverStyle?: boolean;
+
+    /** Whether to call stopPropagation on the mouseleave event in BaseListItem */
+    shouldStopMouseLeavePropagation?: boolean;
 };
 
 type ValidListItem =
@@ -268,6 +274,12 @@ type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     shouldShowRightCaret?: boolean;
     /** Whether to highlight the selected item */
     shouldHighlightSelectedItem?: boolean;
+
+    /** Whether to disable the hover style of the item */
+    shouldDisableHoverStyle?: boolean;
+
+    /** Whether to call stopPropagation on the mouseleave event in BaseListItem */
+    shouldStopMouseLeavePropagation?: boolean;
 };
 type RadioListItemProps<TItem extends ListItem> = ListItemProps<TItem>;
 

src/components/SelectionList/index.tsx

@@ -9,6 +9,7 @@ import type {SelectionListProps} from './types';
 function SelectionList<TItem extends ListItem>({ref, ...props}: SelectionListProps<TItem>) {
     const [isScreenTouched, setIsScreenTouched] = useState(false);
     const [shouldDebounceScrolling, setShouldDebounceScrolling] = useState(false);
+    const [shouldDisableHoverStyle, setShouldDisableHoverStyle] = useState(false);
 
     const touchStart = () => setIsScreenTouched(true);
     const touchEnd = () => setIsScreenTouched(false);
@@ -52,6 +53,35 @@ function SelectionList<TItem extends ListItem>({ref, ...props}: SelectionListPro
         };
     }, []);
 
+    useEffect(() => {
+        if (canUseTouchScreen()) {
+            return;
+        }
+
+        let lastClientX = 0;
+        let lastClientY = 0;
+        const mouseMoveHandler = (event: MouseEvent) => {
+            // On Safari, scrolling can also trigger a mousemove event,
+            // so this comparison is needed to filter out cases where the mouse hasn't actually moved.
+            if (event.clientX === lastClientX && event.clientY === lastClientY) {
+                return;
+            }
+
+            lastClientX = event.clientX;
+            lastClientY = event.clientY;
+
+            setShouldDisableHoverStyle(false);
+        };
+        const wheelHandler = () => setShouldDisableHoverStyle(false);
+
+        document.addEventListener('mousemove', mouseMoveHandler, {passive: true});
+        document.addEventListener('wheel', wheelHandler, {passive: true});
+        return () => {
+            document.removeEventListener('mousemove', mouseMoveHandler);
+            document.removeEventListener('wheel', wheelHandler);
+        };
+    }, []);
+
     return (
         <BaseSelectionList
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -61,6 +91,8 @@ function SelectionList<TItem extends ListItem>({ref, ...props}: SelectionListPro
             // For example, a long press will trigger a focus event on mobile chrome.
             shouldIgnoreFocus={isMobileChrome() && isScreenTouched}
             shouldDebounceScrolling={shouldDebounceScrolling}
+            shouldDisableHoverStyle={shouldDisableHoverStyle}
+            setShouldDisableHoverStyle={setShouldDisableHoverStyle}
         />
     );
 }

src/components/SelectionList/types.ts

@@ -143,6 +143,10 @@ type SelectionListProps<TItem extends ListItem> = {
 
     /** Whether to highlight the selected item */
     shouldHighlightSelectedItem?: boolean;
+
+    /** Whether hover style should be disabled */
+    shouldDisableHoverStyle?: boolean;
+    setShouldDisableHoverStyle?: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
 type TextInputOptions = {

src/components/SelectionListWithSections/BaseListItem.tsx

@@ -2,6 +2,7 @@ import React, {useRef} from 'react';
 import {View} from 'react-native';
 import {getButtonRole} from '@components/Button/utils';
 import Icon from '@components/Icon';
+// eslint-disable-next-line no-restricted-imports
 import * as Expensicons from '@components/Icon/Expensicons';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
@@ -44,6 +45,8 @@ function BaseListItem<TItem extends ListItem>({
     forwardedFSClass,
     shouldShowRightCaret = false,
     shouldHighlightSelectedItem = true,
+    shouldDisableHoverStyle,
+    shouldStopMouseLeavePropagation = true,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -57,7 +60,9 @@ function BaseListItem<TItem extends ListItem>({
     useSyncFocus(pressableRef, !!isFocused, shouldSyncFocus);
     const handleMouseLeave = (e: React.MouseEvent<Element, MouseEvent>) => {
         bind.onMouseLeave();
-        e.stopPropagation();
+        if (shouldStopMouseLeavePropagation) {
+            e.stopPropagation();
+        }
         setMouseUp();
     };
 
@@ -105,7 +110,7 @@ function BaseListItem<TItem extends ListItem>({
                 isNested
                 hoverDimmingValue={1}
                 pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}
-                hoverStyle={[!item.isDisabled && item.isInteractive !== false && styles.hoveredComponentBG, hoverStyle]}
+                hoverStyle={!shouldDisableHoverStyle ? [!item.isDisabled && item.isInteractive !== false && styles.hoveredComponentBG, hoverStyle] : undefined}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: shouldShowBlueBorderOnFocus}}
                 onMouseDown={(e) => e.preventDefault()}
                 id={keyForList ?? ''}

src/components/SelectionListWithSections/BaseSelectionListItemRenderer.tsx

@@ -59,6 +59,8 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
     userBillingFundID,
     shouldShowRightCaret,
     shouldHighlightSelectedItem = true,
+    shouldDisableHoverStyle,
+    shouldStopMouseLeavePropagation,
 }: BaseSelectionListItemRendererProps<TItem>) {
     const handleOnCheckboxPress = () => {
         if (isTransactionGroupListItemType(item)) {
@@ -118,6 +120,8 @@ function BaseSelectionListItemRenderer<TItem extends ListItem>({
                 shouldShowRightCaret={shouldShowRightCaret}
                 shouldHighlightSelectedItem={shouldHighlightSelectedItem}
                 sectionIndex={sectionIndex}
+                shouldDisableHoverStyle={shouldDisableHoverStyle}
+                shouldStopMouseLeavePropagation={shouldStopMouseLeavePropagation}
             />
             {item.footerContent && item.footerContent}
         </>