diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index c516762fc044..64c7c6174402 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -129,6 +129,7 @@ function BaseSelectionList( shouldDebounceScrolling = false, shouldPreventActiveCellVirtualization = false, shouldScrollToFocusedIndex = true, + isSmallScreenWidth, onContentSizeChange, listItemTitleStyles, initialNumToRender = 12, @@ -412,6 +413,11 @@ function BaseSelectionList( if (shouldShowTextInput) { clearInputAfterSelect(); + } else if (isSmallScreenWidth) { + if (!item.isDisabledCheckbox) { + onCheckboxPress?.(item); + } + return; } } @@ -437,6 +443,8 @@ function BaseSelectionList( shouldPreventDefaultFocusOnSelectRow, isFocused, isScreenFocused, + isSmallScreenWidth, + onCheckboxPress, ], ); diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index aded0deb1d69..1ba38e3639f9 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -711,6 +711,9 @@ type SelectionListProps = Partial & { /** Whether to scroll to the focused index */ shouldScrollToFocusedIndex?: boolean; + /** Whether the layout is narrow */ + isSmallScreenWidth?: boolean; + /** Called when scrollable content view of the ScrollView changes */ onContentSizeChange?: (w: number, h: number) => void; diff --git a/src/components/SelectionListWithModal/index.tsx b/src/components/SelectionListWithModal/index.tsx index 97dc471e5bc3..919e9ad25268 100644 --- a/src/components/SelectionListWithModal/index.tsx +++ b/src/components/SelectionListWithModal/index.tsx @@ -112,6 +112,7 @@ function SelectionListWithModal( sections={sections} onLongPressRow={handleLongPressRow} isScreenFocused={isScreenFocused} + isSmallScreenWidth={isSmallScreenWidth} // eslint-disable-next-line react/jsx-props-no-spreading {...rest} />