From ccb6c0d3e44dbd91958b3052de19944d9ab0018f Mon Sep 17 00:00:00 2001 From: Isha Kakkad Date: Fri, 25 Apr 2025 22:44:56 +0530 Subject: [PATCH 1/5] Text in search field does not move to the end when report name is long --- .../Search/SearchRouter/SearchRouter.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index 9e1fc8c3074d..f45e7f4b78d0 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -1,7 +1,7 @@ import {findFocusedRoute, useNavigationState} from '@react-navigation/native'; import isEqual from 'lodash/isEqual'; import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'; -import {View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import type {TextInputProps} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; @@ -188,7 +188,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla scrollToRight(textInputRef.current); shouldScrollRef.current = false; - }, []); + }, [textInputValue]); const onSearchQueryChange = useCallback( (userQuery: string, autoScrollToRight = false) => { @@ -234,6 +234,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla const setTextAndUpdateSelection = useCallback( (text: string) => { setTextInputValue(text); + shouldScrollRef.current = true; setSelection({start: text.length, end: text.length}); }, [setSelection, setTextInputValue], @@ -241,6 +242,13 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla const onListItemPress = useCallback( (item: OptionData | SearchQueryItem) => { + const setFocusAndScrollToRight = () => { + InteractionManager.runAfterInteractions(() => { + textInputRef.current?.focus(); + textInputRef?.current && scrollToRight(textInputRef?.current); + }); + } + if (isSearchQueryItem(item)) { if (!item.searchQuery) { return; @@ -249,7 +257,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.CONTEXTUAL_SUGGESTION) { const searchQuery = getContextualSearchQuery(item); const newSearchQuery = `${searchQuery}\u00A0`; - onSearchQueryChange(newSearchQuery, true); + onSearchQueryChange(newSearchQuery); setSelection({start: newSearchQuery.length, end: newSearchQuery.length}); const autocompleteKey = getContextualSearchAutocompleteKey(item); @@ -258,6 +266,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla setAutocompleteSubstitutions(substitutions); } + setFocusAndScrollToRight(); } else if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.AUTOCOMPLETE_SUGGESTION && textInputValue) { const trimmedUserSearchQuery = getQueryWithoutAutocompletedPart(textInputValue); const newSearchQuery = `${trimmedUserSearchQuery}${sanitizeSearchValue(item.searchQuery)}\u00A0`; @@ -270,7 +279,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla setAutocompleteSubstitutions(substitutions); } // needed for android mWeb - textInputRef.current?.focus(); + setFocusAndScrollToRight(); } else { submitSearch(item.searchQuery); } From a165191b66ef6605003b19fbe3fa53148bba37b5 Mon Sep 17 00:00:00 2001 From: Isha Kakkad Date: Fri, 25 Apr 2025 22:56:54 +0530 Subject: [PATCH 2/5] Fix flicker issue --- src/components/Search/SearchRouter/SearchRouter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index f45e7f4b78d0..7806a7547830 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -270,7 +270,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla } else if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.AUTOCOMPLETE_SUGGESTION && textInputValue) { const trimmedUserSearchQuery = getQueryWithoutAutocompletedPart(textInputValue); const newSearchQuery = `${trimmedUserSearchQuery}${sanitizeSearchValue(item.searchQuery)}\u00A0`; - onSearchQueryChange(newSearchQuery); + onSearchQueryChange(newSearchQuery, true); setSelection({start: newSearchQuery.length, end: newSearchQuery.length}); if (item.mapKey && item.autocompleteID) { From 77c92cd0bbf2c4db262d1b59994bb697587372d5 Mon Sep 17 00:00:00 2001 From: Isha Kakkad Date: Sat, 26 Apr 2025 20:15:04 +0530 Subject: [PATCH 3/5] Fix eslint --- src/components/Search/SearchRouter/SearchRouter.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index 7806a7547830..2ca98b15f153 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -244,10 +244,13 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla (item: OptionData | SearchQueryItem) => { const setFocusAndScrollToRight = () => { InteractionManager.runAfterInteractions(() => { - textInputRef.current?.focus(); - textInputRef?.current && scrollToRight(textInputRef?.current); + if (!textInputRef.current) { + return; + } + textInputRef.current.focus() + scrollToRight(textInputRef.current); }); - } + }; if (isSearchQueryItem(item)) { if (!item.searchQuery) { From a58879aa68806fdfaac0413ca88a962cc06cd98a Mon Sep 17 00:00:00 2001 From: Isha Kakkad Date: Sat, 26 Apr 2025 20:47:44 +0530 Subject: [PATCH 4/5] fix issue --- src/components/Search/SearchRouter/SearchRouter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index 2ca98b15f153..7ad2ad467531 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -260,7 +260,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla if (item.searchItemType === CONST.SEARCH.SEARCH_ROUTER_ITEM_TYPE.CONTEXTUAL_SUGGESTION) { const searchQuery = getContextualSearchQuery(item); const newSearchQuery = `${searchQuery}\u00A0`; - onSearchQueryChange(newSearchQuery); + onSearchQueryChange(newSearchQuery, true); setSelection({start: newSearchQuery.length, end: newSearchQuery.length}); const autocompleteKey = getContextualSearchAutocompleteKey(item); From 63dfe0c02876b147242a4c961bf7fa1f592824f4 Mon Sep 17 00:00:00 2001 From: Isha Kakkad Date: Sat, 26 Apr 2025 20:52:18 +0530 Subject: [PATCH 5/5] Fix prettier --- src/components/Search/SearchRouter/SearchRouter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index 7ad2ad467531..6295c64ca7e9 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -247,7 +247,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla if (!textInputRef.current) { return; } - textInputRef.current.focus() + textInputRef.current.focus(); scrollToRight(textInputRef.current); }); };