diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx index 5f4438f18f60..fe9ccc55711b 100644 --- a/src/components/SelectionList/BaseListItem.tsx +++ b/src/components/SelectionList/BaseListItem.tsx @@ -29,6 +29,7 @@ function BaseListItem({ children, isFocused, onFocus = () => {}, + hoverStyle, }: BaseListItemProps) { const theme = useTheme(); const styles = useThemeStyles(); @@ -68,7 +69,7 @@ function BaseListItem({ 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 index c2680c92780a..d2fc231b5ac6 100644 --- a/src/components/SelectionList/TableListItem.tsx +++ b/src/components/SelectionList/TableListItem.tsx @@ -58,6 +58,7 @@ function TableListItem({ 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 index d89f4d5b92f3..119634c61fd8 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -147,6 +147,7 @@ type BaseListItemProps = CommonListItemProps & { pendingAction?: PendingAction | null; FooterComponent?: ReactElement; children?: ReactElement> | ((hovered: boolean) => ReactElement>); + hoverStyle?: StyleProp; }; type UserListItemProps = ListItemProps & {