Merge pull request #37521 from rayane-djouah/fix/37295

Fixes for selection list
Expensify · Mar 20, 2024 · 99169e1 · 99169e1
2 parents 04d3555 + 6690997
commit 99169e1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 14 deletions.
diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
@@ -85,7 +85,7 @@ function BaseListItem<TItem extends ListItem>({
                             // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
                             disabled={isDisabled || item.isDisabledCheckbox}
                             onPress={handleCheckboxPress}
-                            style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled]}
+                            style={[styles.cursorUnset, StyleUtils.getCheckboxPressableStyle(), item.isDisabledCheckbox && styles.cursorDisabled, styles.mr3]}
                         >
                             <View style={selectMultipleStyle}>
                                 {item.isSelected && (

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -9,6 +9,7 @@ import Button from '@components/Button';
 import Checkbox from '@components/Checkbox';
 import FixedFooter from '@components/FixedFooter';
 import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
+import {PressableWithFeedback} from '@components/Pressable';
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import SectionList from '@components/SectionList';
 import ShowMoreButton from '@components/ShowMoreButton';
@@ -512,18 +513,30 @@ function BaseSelectionList<TItem extends ListItem>(
                         ) : (
                             <>
                                 {!headerMessage && canSelectMultiple && shouldShowSelectAll && (
-                                    <View style={[styles.peopleRow, styles.userSelectNone, styles.ph4, styles.pb3, listHeaderWrapperStyle]}>
-                                        <Checkbox
-                                            isChecked={flattenedSections.allSelected}
-                                            onPress={selectAllRow}
-                                            disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
-                                            accessibilityLabel={translate('workspace.people.selectAll')}
-                                        />
-                                        {customListHeader ?? (
-                                            <View style={[styles.flex1]}>
-                                                <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
-                                            </View>
-                                        )}
+                                    <View style={[styles.userSelectNone, styles.peopleRow, styles.ph5, styles.pb3, listHeaderWrapperStyle]}>
+                                        <View style={[styles.flexRow, styles.alignItemsCenter]}>
+                                            <Checkbox
+                                                accessibilityLabel={translate('workspace.people.selectAll')}
+                                                isChecked={flattenedSections.allSelected}
+                                                onPress={selectAllRow}
+                                                disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
+                                            />
+                                            {!customListHeader && (
+                                                <PressableWithFeedback
+                                                    style={[styles.userSelectNone, styles.flexRow, styles.alignItemsCenter]}
+                                                    onPress={selectAllRow}
+                                                    accessibilityLabel={translate('workspace.people.selectAll')}
+                                                    role="button"
+                                                    accessibilityState={{checked: flattenedSections.allSelected}}
+                                                    disabled={flattenedSections.allOptions.length === flattenedSections.disabledOptionsIndexes.length}
+                                                    dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
+                                                    onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
+                                                >
+                                                    <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
+                                                </PressableWithFeedback>
+                                            )}
+                                        </View>
+                                        {customListHeader}
                                     </View>
                                 )}
                                 {!headerMessage && !canSelectMultiple && customListHeader}

diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
@@ -1541,7 +1541,6 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
     getTestToolsModalStyle: (windowWidth: number): ViewStyle[] => [styles.settingsPageBody, styles.p5, {width: windowWidth * 0.9}],
 
     getMultiselectListStyles: (isSelected: boolean, isDisabled: boolean): ViewStyle => ({
-        ...styles.mr3,
         ...(isSelected && styles.checkedContainer),
         ...(isSelected && styles.borderColorFocus),
         ...(isDisabled && styles.cursorDisabled),