Merge pull request #40215 from Krishna2323/krishna2323/issue/39716

fix: No hover effect for selected options.
Expensify · Apr 16, 2024 · 29eb56e · 29eb56e
2 parents dd9ca88 + 0ce27e1
commit 29eb56e
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 1 deletion.
diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
@@ -29,6 +29,7 @@ function BaseListItem<TItem extends ListItem>({
     children,
     isFocused,
     onFocus = () => {},
+    hoverStyle,
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -68,7 +69,7 @@ function BaseListItem<TItem extends ListItem>({
                 accessibilityLabel={item.text ?? ''}
                 role={CONST.ROLE.BUTTON}
                 hoverDimmingValue={1}
-                hoverStyle={!item.isDisabled && !item.isSelected && styles.hoveredComponentBG}
+                hoverStyle={[!item.isDisabled && styles.hoveredComponentBG, hoverStyle]}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
                 nativeID={keyForList ?? ''}

diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx
@@ -58,6 +58,7 @@ function TableListItem<TItem extends ListItem>({
             pendingAction={item.pendingAction}
             keyForList={item.keyForList}
             onFocus={onFocus}
+            hoverStyle={item.isSelected && styles.activeComponentBG}
         >
             {(hovered) => (
                 <>

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -147,6 +147,7 @@ type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     pendingAction?: PendingAction | null;
     FooterComponent?: ReactElement;
     children?: ReactElement<ListItemProps<TItem>> | ((hovered: boolean) => ReactElement<ListItemProps<TItem>>);
+    hoverStyle?: StyleProp<ViewStyle>;
 };
 
 type UserListItemProps<TItem extends ListItem> = ListItemProps<TItem> & {