[Due for payment 2025-05-13] [$250] Web - Search - Text in search field does not move to the end when report name is long

[nlemma]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.1.15-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: https://github.com/Expensify/Expensify/issues/452243
Issue reported by: Applause Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Open a report with really long name (invoice chat with user that has email as display name).
3. Click on the search icon on the top right.
4. Click Search in.

Expected Result:

The text in the search field will move to the end to show the text cursor (this issue was fixed with #52945

Actual Result:

The text in the search field does not move to the end. The text cursor is hidden and user has to scroll to the right to see the text cursor.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6781735_1742916798052.20250325_233039.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021908245504068935332
• Upwork Job ID: 1908245504068935332
• Last Price Increase: 2025-04-04
• Automatic offers:
• ishakakkad | Contributor | 107019767

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @lschurr

[melvin-bot]

Triggered auto assignment to @lschurr (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[Shahidullah-Muffakir]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-04 18:04:33 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

When users click "Search in" for a report with a long name (like an invoice chat with an email as display name), the text cursor is hidden and users have to manually scroll right to see where they're typing. The text should automatically scroll to show the cursor position.

What is the root cause of that problem?

The useEffect hook that handles scrolling to the right was only running once when the component mounted (empty dependency array []). It is not reacting to changes in the search text, so when new text was added through "Search in", the automatic scroll didn't happen.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 182 to 189 in 4e59e65

	useEffect(() => {
	if (!textInputRef.current || !shouldScrollRef.current) {
	return;
	}
	scrollToRight(textInputRef.current);
	shouldScrollRef.current = false;
	}, []);

What changes do you think we should make in order to solve the problem?

Add textInputValue to the dependency array of the useEffect hook in SearchRouter.tsx. This makes the scroll-to-right behavior trigger whenever the search text changes, not just on component mount. The existing scroll logic is correct, it just wasn't being called at the right time.

   useEffect(() => {
        if (!textInputRef.current || !shouldScrollRef.current) {
            return;
        }

        scrollToRight(textInputRef.current);
        shouldScrollRef.current = false;
    }, [textInputValue]);

we can use the debouncedInputValue as well

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

[thelullabyy]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The text in the search field does not move to the end. The text cursor is hidden and user has to scroll to the right to see the text cursor.

What is the root cause of that problem?

This useEffect hook is designed to handle text input scrolling behavior where it checks if both the text input reference and scroll flag are available.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 182 to 189 in 4e59e65

	useEffect(() => {
	if (!textInputRef.current || !shouldScrollRef.current) {
	return;
	}
	scrollToRight(textInputRef.current);
	shouldScrollRef.current = false;
	}, []);

The right-scrolling useEffect hook isn't reacting to updates in shouldScrollRef, meaning setting shouldScrollRef to true doesn't trigger the automatic scroll.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 193 to 194 in 4e59e65

	if (autoScrollToRight) {
	shouldScrollRef.current = true;

What changes do you think we should make in order to solve the problem?

Update useEffect to include shouldScrollRef.current in its dependency array so the right-scroll logic triggers on shouldScrollRef.current changes.

useEffect(() => {
        if (!textInputRef.current || !shouldScrollRef.current) {
            return;
        }

        scrollToRight(textInputRef.current);
        shouldScrollRef.current = false;
    }, [shouldScrollRef.current]);

With this solution, the logic in useEffect re-run once upon changes because the return function is executed when shouldScrollRef.current is false.
If we want to avoid an extra re-run, please consider alternative solutions

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

NA
Add this logic to handle automatic scrolling to the right in a separate onSearchQueryChange function instead of using shouldScrollRef.current

App/src/components/Search/SearchRouter/SearchRouter.tsx

Line 194 in 4e59e65

shouldScrollRef.current = true;

requestAnimationFrame(() => {
                    if (textInputRef.current) {
                        scrollToRight(textInputRef.current);
                    }
                });

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021908245504068935332

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @fedirjh (External)

[mohit6789]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-04 20:51:48 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Search - Text in search field does not move to the end when report name is long. The text cursor is hidden and user has to scroll to the right to see the text cursor.

What is the root cause of that problem?

Below useEffect hook is responsible to handle the scrolling to right but it only runs only when the component mount because we only pass [] as dependancy. But we also need to scrollToRight when search value change.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 182 to 189 in 4e59e65

	useEffect(() => {
	if (!textInputRef.current || !shouldScrollRef.current) {
	return;
	}
	scrollToRight(textInputRef.current);
	shouldScrollRef.current = false;
	}, []);

What changes do you think we should make in order to solve the problem?

To fix this issue we need to do couple of changes so useEffect runs correctly.

1. we need to pass textInputValue as a dependency array here .

useEffect(() => {
      if (!textInputRef.current || !shouldScrollRef.current) {
          return;
      }

      scrollToRight(textInputRef.current);
      shouldScrollRef.current = false;
  }, [textInputValue]);

2. This hooks does not executed if the shouldScrollRef.current === false because of this check. So we need to set `shouldScrollRef.current = true' here

const setTextAndUpdateSelection = useCallback(
        (text: string) => {
            setTextInputValue(text);
            shouldScrollRef.current = true;
            setSelection({start: text.length, end: text.length});
        },
        [setSelection, setTextInputValue],
    );

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

Alternate Solution 1

Remove all the code from here and replace with following logic

1. Create below function and here we need to use setTimeout without this will not work properly

const scrollToRightOnChange = () => {
    requestAnimationFrame(() => {
        if (textInputRef.current) {
            setTimeout(() => {
                scrollToRight(textInputRef.current);
            }, 0)
        }
    });
}

2. Replace this code with below code and remove code related to autoScrollToRight param.

scrollToRightOnChange();

3. call scrollToRightOnChange() from inside setTextAndUpdateSelection()

   App/src/components/Search/SearchRouter/SearchRouter.tsx

   Lines 232 to 238 in 4e59e65

   	const setTextAndUpdateSelection = useCallback(
   	(text: string) => {
   	setTextInputValue(text);
   	setSelection({start: text.length, end: text.length});
   	},
   	[setSelection, setTextInputValue],
   	);

const setTextAndUpdateSelection = useCallback(
    (text: string) => {
        setTextInputValue(text);
        scrollToRightOnChange();
        setSelection({start: text.length, end: text.length});
    },
    [setSelection, setTextInputValue],
);

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[bernhardoj]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When selecting a suggestion query from the search router, the text input doesn't scroll to the end even though the selection is at the end. This is a behavior on a plain HTML too.

What is the root cause of that problem?

We already have a logic to scroll to the right, however, it's only triggered on mount, which is useless.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 181 to 189 in 498b987

	// Trigger scrollToRight when input value changes and shouldScroll is true
	useEffect(() => {
	if (!textInputRef.current || !shouldScrollRef.current) {
	return;
	}
	scrollToRight(textInputRef.current);
	shouldScrollRef.current = false;
	}, []);

Previously, we had a debounced input value as the deps, but it was removed in #53198.

What changes do you think we should make in order to solve the problem?

We need to re-add back the textInputValue (or debouncedInputValue) as the deps. Also, we need to pass true to the onSearchQueryChange second param here, so the input is scrolled too in a case of selecting autocomplete while there is a text on the input.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 259 to 262 in 498b987

	} 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);

Passing it as true will set the shouldScrollRef flag to true.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 191 to 195 in 498b987

	const onSearchQueryChange = useCallback(
	(userQuery: string, autoScrollToRight = false) => {
	if (autoScrollToRight) {
	shouldScrollRef.current = true;
	}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[ishakakkad]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-05 04:56:26 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

The text in the search field does not move to the end. The text cursor is hidden and user has to scroll to the right to see the text cursor.

What is the root cause of that problem?

We have useEffect hook which can scrollTorRight but that only execute at the time of component render. So in case of text change useEffect hook does not execute.

App/src/components/Search/SearchRouter/SearchRouter.tsx

Lines 181 to 189 in 498b987

	// Trigger scrollToRight when input value changes and shouldScroll is true
	useEffect(() => {
	if (!textInputRef.current || !shouldScrollRef.current) {
	return;
	}
	scrollToRight(textInputRef.current);
	shouldScrollRef.current = false;
	}, []);

What changes do you think we should make in order to solve the problem?

To fixed this issue we need to make changes in following places.

1. Pass the textInputValue as a dependency array here, so useEffect runs everytime textInputValue change. OR We can pas debouncedInputValue as a dependency array but that will not scrollToRight immediately and user can see delay during scrolling so that is not good user experience.

useEffect(() => {
    if (!textInputRef.current || !shouldScrollRef.current) {
        return;
    }

    scrollToRight(textInputRef.current);
    shouldScrollRef.current = false;
}, [textInputValue]);

2. We need to set shouldScrollRef.current flag to true when user select the value using mouse for that we can pass the true as a second parameter here . So that will set the shouldScrollRef.current flag to true from here

onSearchQueryChange(newSearchQuery, true);

3. We need to set shouldScrollRef.current flag to true when user select the option from dropdown using keyboard (down/up arrow) for that we can set the shouldScrollRef.current flag to true from here

const setTextAndUpdateSelection = useCallback(
        (text: string) => {
            setTextInputValue(text);
            shouldScrollRef.current = true;
            setSelection({start: text.length, end: text.length});
        },
        [setSelection, setTextInputValue],
    );

UPDATES: Issue when user navigate using TAB move to end not working.

When user navigate using TAB, textbox lost it's focus and when press enter textbox is focused again using this code.

To fix the issue when user navigate using TAB we can make following changes.
Options 1: Preffered
After textbox get focused call scrollToRight here and don't pass true here because this will redundant now.

textInputRef.current?.focus();
textInputRef?.current && scrollToRight(textInputRef?.current);

To fix the issue mention #59682 (comment), we can wrap focus logic into InteractionManager.runAfterInteractions like below.

InteractionManager.runAfterInteractions(() => {
      textInputRef.current?.focus();
      textInputRef?.current && scrollToRight(textInputRef?.current);
  });

Options 2: seems focus is only needed for mobile so we can add following check.

isMobile && textInputRef.current?.focus();

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

NA

What alternative solutions did you explore? (Optional)

We can remove the logic here and use requestAnimationFrame as @mohit6789 mention in his comment.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.