diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index f886758a1de9..2109ae16ebfd 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -265,6 +265,10 @@ function BaseSelectionList( isFocused, }); + const clearInputAfterSelect = useCallback(() => { + onChangeText?.(''); + }, [onChangeText]); + // eslint-disable-next-line react-hooks/exhaustive-deps const debouncedOnSelectRow = useCallback(lodashDebounce(onSelectRow, 1000, {leading: true}), [onSelectRow]); @@ -287,6 +291,10 @@ function BaseSelectionList( scrollToIndex(Math.max(selectedOptionsCount - 1, 0), true); } } + + if (shouldShowTextInput) { + clearInputAfterSelect(); + } } if (shouldDebounceRowSelect) { @@ -584,7 +592,7 @@ function BaseSelectionList( [flattenedSections.allOptions, setFocusedIndex, updateAndScrollToFocusedIndex], ); - useImperativeHandle(ref, () => ({scrollAndHighlightItem}), [scrollAndHighlightItem]); + useImperativeHandle(ref, () => ({scrollAndHighlightItem, clearInputAfterSelect}), [scrollAndHighlightItem, clearInputAfterSelect]); /** Selects row when pressing Enter */ useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, shouldDebounceRowSelect ? debouncedSelectFocusedOption : selectFocusedOption, { diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index 460a467337e2..ec3b22c66043 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -430,6 +430,7 @@ type BaseSelectionListProps = Partial & { type SelectionListHandle = { scrollAndHighlightItem?: (items: string[], timeout: number) => void; + clearInputAfterSelect?: () => void; }; type ItemLayout = { diff --git a/src/pages/NewChatPage.tsx b/src/pages/NewChatPage.tsx index b2008ecc2cca..9377ab60eda2 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -1,6 +1,6 @@ import isEmpty from 'lodash/isEmpty'; import reject from 'lodash/reject'; -import React, {useCallback, useEffect, useMemo, useState} from 'react'; +import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import KeyboardAvoidingView from '@components/KeyboardAvoidingView'; @@ -11,7 +11,7 @@ import ReferralProgramCTA from '@components/ReferralProgramCTA'; import ScreenWrapper from '@components/ScreenWrapper'; import SelectCircle from '@components/SelectCircle'; import SelectionList from '@components/SelectionList'; -import type {ListItem} from '@components/SelectionList/types'; +import type {ListItem, SelectionListHandle} from '@components/SelectionList/types'; import UserListItem from '@components/SelectionList/UserListItem'; import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails'; import useDebouncedState from '@hooks/useDebouncedState'; @@ -128,6 +128,7 @@ function NewChatPage({isGroupChat}: NewChatPageProps) { const personalData = useCurrentUserPersonalDetails(); const {insets} = useStyledSafeAreaInsets(); const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false}); + const selectionListRef = useRef(null); const {headerMessage, searchTerm, debouncedSearchTerm, setSearchTerm, selectedOptions, setSelectedOptions, recentReports, personalDetails, userToInvite, areOptionsInitialized} = useOptions({ @@ -223,6 +224,8 @@ function NewChatPage({isGroupChat}: NewChatPageProps) { newSelectedOptions = [...selectedOptions, {...option, isSelected: true, selected: true, reportID: option.reportID ?? ''}]; } + selectionListRef?.current?.clearInputAfterSelect?.(); + setSelectedOptions(newSelectedOptions); } @@ -301,6 +304,7 @@ function NewChatPage({isGroupChat}: NewChatPageProps) { keyboardVerticalOffset={variables.contentHeaderHeight + (insets?.top ?? 0) + variables.tabSelectorButtonHeight + variables.tabSelectorButtonPadding} > + ref={selectionListRef} ListItem={UserListItem} sections={areOptionsInitialized ? sections : CONST.EMPTY_ARRAY} textInputValue={searchTerm}