Merge pull request Expensify#89708 from software-mansion-labs/fix/disabled-selected-item-button

[CP Staging] Make selection button clickable in SelectableListItem when item is selected but disabled

Author: Beamanator

src/components/SelectionList/BaseSelectionList.tsx

@@ -347,8 +347,8 @@ function BaseSelectionList<TItem extends ListItem>({
     };
 
     const renderItem: ListRenderItem<TItem> = ({item, index}: ListRenderItemInfo<TItem>) => {
-        const isItemDisabled = isDisabled || item.isDisabled;
         const selected = isItemSelected(item);
+        const isItemDisabled = isDisabled || (!!item.isDisabled && !selected);
         const isItemFocused = (!isDisabled || selected) && focusedIndex === index;
         const isItemVisuallyFocused = isItemFocused && (shouldHighlightInitiallyFocusedItem || isKeyboardNavigating);
         const isItemHighlighted = !!itemsToHighlight?.has(item.keyForList);

src/components/SelectionList/ListItem/BaseListItem.tsx

@@ -199,7 +199,7 @@ function BaseListItem<TItem extends ListItem>({
                 isNested
                 hoverDimmingValue={1}
                 pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}
-                hoverStyle={!shouldDisableHoverStyle ? [!item.isDisabled && item.isInteractive !== false && styles.hoveredComponentBG, hoverStyle] : undefined}
+                hoverStyle={!shouldDisableHoverStyle ? [(!item.isDisabled || item.isSelected) && item.isInteractive !== false && styles.hoveredComponentBG, hoverStyle] : undefined}
                 dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: shouldShowBlueBorderOnFocus}}
                 onMouseDown={(e) => {
                     if ((e?.target as HTMLElement)?.tagName === CONST.ELEMENT_NAME.INPUT) {

src/components/SelectionList/ListItem/InviteMemberListItem.tsx

@@ -47,7 +47,7 @@ function InviteMemberListItem<TItem extends ListItem>({
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const accountID = !item.reportID ? item.accountID || firstItemIconID : undefined;
 
-    const ListItemWrapper = item.isDisabled ? BaseListItem : SelectableListItem;
+    const ListItemWrapper = item.isDisabled && !item.isSelected ? BaseListItem : SelectableListItem;
 
     return (
         <ListItemWrapper

src/components/SelectionList/ListItem/SelectableListItem.tsx

@@ -41,8 +41,7 @@ function SelectableListItem<TItem extends ListItem>({
                         <ButtonComponent
                             item={item}
                             onSelectRow={onSelectionButtonPress ?? onSelectRow}
-                            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- disabled if either of the optional booleans are true
-                            disabled={isDisabled || item.isDisabledCheckbox}
+                            disabled={!!isDisabled || !!item.isDisabledCheckbox}
                             style={styles.ml3}
                         />
                         {typeof rightHandSideComponent === 'function' ? rightHandSideComponent(item, isFocused) : rightHandSideComponent}
@@ -58,8 +57,7 @@ function SelectableListItem<TItem extends ListItem>({
                           <ButtonComponent
                               item={item}
                               onSelectRow={onSelectionButtonPress ?? onSelectRow}
-                              // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- disabled if either of the optional booleans are true
-                              disabled={isDisabled || item.isDisabledCheckbox}
+                              disabled={!!isDisabled || item.isDisabledCheckbox}
                               style={styles.mr3}
                           />
                           {typeof children === 'function' ? children(hovered) : children}

src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx

@@ -364,7 +364,7 @@ function BaseSelectionListWithSections<TItem extends ListItem>({
             case CONST.SECTION_LIST_ITEM_TYPE.ROW: {
                 const isItemFocused = index === focusedIndex;
                 const isItemVisuallyFocused = isItemFocused && (shouldHighlightInitiallyFocusedItem || isKeyboardNavigating);
-                const isDisabled = !!item.isDisabled;
+                const isDisabled = !!item.isDisabled && !item.isSelected;
 
                 return (
                     <ListItemRenderer