diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index c312116bf125..1eadb34c4686 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -459,7 +459,13 @@ function BaseSelectionList({ } }, [onSelectAll, shouldShowTextInput, shouldPreventDefaultFocusOnSelectRow]); - useImperativeHandle(ref, () => ({scrollAndHighlightItem, scrollToIndex, updateFocusedIndex}), [scrollAndHighlightItem, scrollToIndex, updateFocusedIndex]); + useImperativeHandle(ref, () => ({scrollAndHighlightItem, scrollToIndex, updateFocusedIndex, focusTextInput}), [ + focusTextInput, + scrollAndHighlightItem, + scrollToIndex, + updateFocusedIndex, + ]); + return ( {textInputComponent({shouldBeInsideList: false})} diff --git a/src/components/SelectionList/components/TextInput.tsx b/src/components/SelectionList/components/TextInput.tsx index c2ebd6c66ce2..1a602c9bfa38 100644 --- a/src/components/SelectionList/components/TextInput.tsx +++ b/src/components/SelectionList/components/TextInput.tsx @@ -68,7 +68,7 @@ function TextInput({ const {label, value, onChangeText, errorText, headerMessage, hint, disableAutoFocus, placeholder, maxLength, inputMode, ref: optionsRef} = options ?? {}; const resultsFound = headerMessage !== translate('common.noResultsFound'); const noData = dataLength === 0 && !showLoadingPlaceholder; - const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || !noData); + const shouldShowHeaderMessage = !!headerMessage && (!isLoadingNewOptions || resultsFound || noData); const focusTimeoutRef = useRef(null); const mergedRef = mergeRefs(ref, optionsRef); diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index b098fe15bfc9..8592bac93aec 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -225,6 +225,9 @@ type SelectionListHandle = { /** Updates the focused index and optionally scrolls to it */ updateFocusedIndex: (newFocusedIndex: number, shouldScroll?: boolean) => void; + + /** Sets the focus to the textInput component */ + focusTextInput: () => void; }; type DataDetailsType = { diff --git a/src/pages/Share/ShareTab.tsx b/src/pages/Share/ShareTab.tsx index c767fc7a433d..4e262c56169b 100644 --- a/src/pages/Share/ShareTab.tsx +++ b/src/pages/Share/ShareTab.tsx @@ -1,9 +1,11 @@ import type {Ref} from 'react'; import React, {useEffect, useImperativeHandle, useMemo, useRef} from 'react'; +import {View} from 'react-native'; import {useOptionsList} from '@components/OptionListContextProvider'; -import SelectionList from '@components/SelectionListWithSections'; -import InviteMemberListItem from '@components/SelectionListWithSections/InviteMemberListItem'; -import type {SelectionListHandle} from '@components/SelectionListWithSections/types'; +import SelectionList from '@components/SelectionList'; +import InviteMemberListItem from '@components/SelectionList/ListItem/InviteMemberListItem'; +import type {SelectionListHandle} from '@components/SelectionList/types'; +import Text from '@components/Text'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; @@ -97,19 +99,20 @@ function ShareTab({ref}: ShareTabProps) { searchInServer(debouncedTextInputValue.trim()); }, [debouncedTextInputValue]); - const styledRecentReports = recentReportsOptions.map((item) => ({ - ...item, - pressableStyle: styles.br2, - text: StringUtils.lineBreaksToSpaces(item.text), - wrapperStyle: [styles.pr3, styles.pl3], - })); - - const [sections, header] = useMemo(() => { - const newSections = []; - newSections.push({title: textInputValue.trim() === '' ? translate('search.recentChats') : undefined, data: styledRecentReports}); + const styledRecentReports = useMemo(() => { + return recentReportsOptions.map((item, index) => ({ + ...item, + pressableStyle: styles.br2, + text: StringUtils.lineBreaksToSpaces(item.text), + wrapperStyle: [styles.pr3, styles.pl3], + keyForList: `${item.reportID}-${index}`, + })); + }, [recentReportsOptions, styles]); + + const header = useMemo(() => { const headerMessage = getHeaderMessage(styledRecentReports.length !== 0, false, textInputValue.trim(), countryCode, false); - return [newSections, headerMessage]; - }, [textInputValue, styledRecentReports, translate, countryCode]); + return headerMessage; + }, [textInputValue, styledRecentReports.length, countryCode]); const onSelectRow = (item: OptionData) => { let reportID = item?.reportID ?? CONST.DEFAULT_NUMBER_ID; @@ -128,21 +131,39 @@ function ShareTab({ref}: ShareTabProps) { } }; + const textInputOptions = useMemo( + () => ({ + value: textInputValue, + label: translate('selectionList.nameEmailOrPhoneNumber'), + hint: offlineMessage, + onChangeText: setTextInputValue, + headerMessage: header, + disableAutoFocus: true, + }), + [textInputValue, setTextInputValue, translate, offlineMessage, header], + ); + + const customListHeader = useMemo( + () => + textInputValue.trim() === '' ? ( + + {translate('search.recentChats')} + + ) : undefined, + [textInputValue, styles, translate], + ); + return ( );