[HOLD for payment 2024-12-11] [$250] Web - Search - Text in search field does not move to the end by default to show text cursor

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.62-3
Reproducible in staging?: Y
Reproducible in production?: Y
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: N/A
Email or phone of affected tester (no customers): [email protected]
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

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:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6665705_1731613839444.20241115_034031.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859033501841956761
• Upwork Job ID: 1859033501841956761
• Last Price Increase: 2024-11-20
• Automatic offers:
• daledah | Contributor | 105007725

Issue Owner

Current Issue Owner: @jliexpensify

[melvin-bot]

Triggered auto assignment to @jliexpensify (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.

[daledah]

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 didn't have logic to scroll the input to the right in:

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

Line 328 in 4cc54ab

const onSearchChange = useCallback(

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

• We can introduce new util function:

const scrollToRight: ScrollToBottom = (input) => {
    if (!('scrollLeft' in input)) {
        return;
    }
    // Scroll to the far right
    input.scrollLeft = input.scrollWidth;    // Can use input.setSelectionRange(length, input.value.length) as well.
};

that will scroll to the far right.

• The above function has only one param, that is the ref of the input. To use it in this case, first we need to expose the ref of the SearchRouterInput by using export default forwardRef(SearchRouterInput) instead of:
  

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

  Line 126 in 4cc54ab

  export default SearchRouterInput;

  
  and then:

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

Line 83 in 4cc54ab

<TextInput

will be:

                    <TextInput ref={ref} ...

• In here add:

    const shouldScrollRef = useRef(false);
    const searchRouterInputRef = useRef(null);
    // Trigger scrollToRight when input value changes and shouldScroll is true
    useEffect(() => {
        if (shouldScrollRef.current) {
            scrollToRight(searchRouterInputRef?.current);
            shouldScrollRef.current = false;
        }
    }, [debouncedInputValue]);

This logic will call the scrollToRight only if shouldScrollRef.current is true because we only want to scrollToRight in a few cases.

• Then we update:
  

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

  Lines 328 to 329 in 4cc54ab

  	const onSearchChange = useCallback(
  	(userQuery: string) => {

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

and in:

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

Line 249 in 4cc54ab

updateSearchValue(`${searchQuery} `);

call updateSearchValue(`${searchQuery} `, true) instead.

What alternative solutions did you explore? (Optional)

[jliexpensify]

@lanitochka17 can you clarify what you mean exactly by this:

Open a report with really long name

Are you saying that any report with a long report title will cause this issue? Do you have any idea of a character limit that will cause this issue?

Or are you referring to just long emails?

[melvin-bot]

@jliexpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[jliexpensify]

Waiting on @lanitochka17

[lanitochka17]

@jliexpensify I think not only long emails but also reports.

[jliexpensify]

@lanitochka17 can you retest on v64-0? I can't reproduce this one consistently

[lanitochka17]

Issue is still reproduce

20241119_213132.mp4

[melvin-bot]

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

[melvin-bot]

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

[jliexpensify]

I think this is a #retain issue, since it deals with an annoyance for our current customers.

[mananjadhav]

Looks like @daledah's proposal would work. But I want to confirm if we really want it to be fixed.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

Triggered auto assignment to @dangrous, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[dangrous]

Yeah I think this is worth fixing, especially since people keep reporting it ^ haha.

Go for it, @daledah!

[melvin-bot]

📣 @daledah 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[daledah]

@mananjadhav PR is ready.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.70-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Text in search field does not move to the end #52945

If no regressions arise, payment will be issued on 2024-12-11. 🎊

For reference, here are some details about the assignees on this issue:

• @mananjadhav requires payment through NewDot Manual Requests
• @daledah requires payment automatic offer (Contributor)

[melvin-bot]

@mananjadhav @jliexpensify @mananjadhav The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[jliexpensify]

Payment Summary

• C: @daledah $250 (paid via Upworks)
• C+: @mananjadhav $250 (to be paid via ND)

Upwork job

[mananjadhav]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: NA. It's en edge case that is never considered.

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: NA

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

• Have a report with a really long name.

Test:

1. Open a report with really long name (invoice chat with user that has email as display name).
2. Click on the search icon on the top right.
3. Click Search in .... (report name)
4. Verify that the cursor is moved to the end.

Do we agree 👍 or 👎

[jliexpensify]

Paid and job closed, @mananjadhav here is the payment summary.

[garrettmknight]

$250 approved for @mananjadhav