diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 4ce19880da8d..f6a40a6dc6cd 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -80,6 +80,7 @@ function BaseSelectionList({ shouldSingleExecuteRowSelect = false, shouldPreventDefaultFocusOnSelectRow = false, shouldShowTextInput = !!textInputOptions?.label, + shouldClearInputOnSelect = false, shouldHighlightSelectedItem = true, shouldUseDefaultRightHandSideCheckmark, shouldDisableHoverStyle = false, @@ -187,7 +188,7 @@ function BaseSelectionList({ return; } if (canSelectMultiple) { - if (shouldShowTextInput) { + if (shouldShowTextInput && shouldClearInputOnSelect) { textInputOptions?.onChangeText?.(''); } else if (isSmallScreenWidth) { if (!item.isDisabledCheckbox) { @@ -211,6 +212,7 @@ function BaseSelectionList({ shouldUpdateFocusedIndex, onSelectRow, shouldShowTextInput, + shouldClearInputOnSelect, shouldPreventDefaultFocusOnSelectRow, isSmallScreenWidth, textInputOptions, diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 636333dc560a..89033aab8eb0 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -151,6 +151,9 @@ type SelectionListProps = Partial & { /** Whether to show the text input */ shouldShowTextInput?: boolean; + /** Whether to clear the text input when a row is selected */ + shouldClearInputOnSelect?: boolean; + /** Whether to highlight the selected item */ shouldHighlightSelectedItem?: boolean; diff --git a/src/pages/settings/Wallet/ShareBankAccount/ShareBankAccount.tsx b/src/pages/settings/Wallet/ShareBankAccount/ShareBankAccount.tsx index dc65eccba610..49adfe17716a 100644 --- a/src/pages/settings/Wallet/ShareBankAccount/ShareBankAccount.tsx +++ b/src/pages/settings/Wallet/ShareBankAccount/ShareBankAccount.tsx @@ -118,7 +118,7 @@ function ShareBankAccount({route}: ShareBankAccountProps) { // Apply search filter if there's a search term if (debouncedSearchTerm) { const searchValue = getSearchValueForPhoneOrEmail(debouncedSearchTerm, countryCode).toLowerCase(); - adminsToDisplay = tokenizedSearch(admins, searchValue, (option) => [option.text ?? '', option.alternateText ?? '']); + adminsToDisplay = tokenizedSearch(adminsToDisplay, searchValue, (option) => [option.text ?? '', option.alternateText ?? '']); } return adminsToDisplay; @@ -127,17 +127,17 @@ function ShareBankAccount({route}: ShareBankAccountProps) { const adminsList = getAdminList(); const toggleSelectAll = () => { - const hasSelectedOptions = selectedOptions.length > 0; setIsAlertVisible(false); - if (hasSelectedOptions) { - setSelectedOptions([]); + const areAllFilteredOptionsSelected = adminsList.length > 0 && adminsList.every((admin) => selectedOptions.some((selected) => selected.login === admin.login)); + + if (areAllFilteredOptionsSelected) { + const filteredLogins = new Set(adminsList.map((admin) => admin.login)); + setSelectedOptions(selectedOptions.filter((option) => !filteredLogins.has(option.login))); } else { - const selectedAllOptions = adminsList?.map((member) => ({ - ...member, - isSelected: true, - })); - setSelectedOptions(selectedAllOptions); + const existingLogins = new Set(selectedOptions.map((option) => option.login)); + const newSelections = adminsList.filter((admin) => !existingLogins.has(admin.login)).map((admin) => ({...admin, isSelected: true})); + setSelectedOptions([...selectedOptions, ...newSelections]); } }; @@ -198,6 +198,7 @@ function ShareBankAccount({route}: ShareBankAccountProps) { } ListItem={UserListItem} shouldUseDefaultRightHandSideCheckmark + onCheckboxPress={toggleOption} onSelectRow={toggleOption} footerContent={