[$250] mWeb/Chrome - Search - Cursor is not moved to the end after selecting for the suggestion

@Ollyws

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.23-2
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: -
Email or phone of affected tester (no customers): applausetester+ds@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Samsung / Chrome
App Component: Search

Action Performed:

Login to any account with expneses
Navigate to the reports page
3.In the search bar, type the following: `status: all type: expense from: [The first letters of a user]
Choose from the suggested,

Expected Result:

After selecting from the suggested, the cursor is moved to the end

Actual Result:

After selecting from the suggested, the cursor is not moved to the end. It stays where it was

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6791790_1743727840721.d08488bf-fa82-4e2b-8290-2c505e381142.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021909637145313280933
Upwork Job ID: 1909637145313280933
Last Price Increase: 2025-04-15
Automatic offers:

thelullabyy | Contributor | 106953218

Issue Owner

Current Issue Owner: @Ollyws

@zanyrenney

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

🚨 Edited by proposal-police: This proposal was edited at 2025-04-04 08:45:46 UTC.

Proposal

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

After selecting from the suggested, the cursor is not moved to the end. It stays where it was

What is the root cause of that problem?

The issue occurs because we do not pass the selection prop in the following location:

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Line 244 in f01c7de

<SearchInputSelectionWrapper
On larger screens, this works correctly because the selection prop is passed here:

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Line 338 in f01c7de

selection={selection}
The selection prop is ultimately handled in:

App/src/components/TextInput/BaseTextInput/index.tsx

Line 392 in 1190a9e

selection={inputProps.selection}

where it determines the position of the text cursor (caret) within the input field.

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

Should pass selection prop in:

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Lines 244 to 259 in f01c7de

    
           <SearchInputSelectionWrapper 
        
               value={textInputValue} 
        
               substitutionMap={autocompleteSubstitutions} 
        
               onSearchQueryChange={onSearchQueryChange} 
        
               isFullWidth 
        
               onSubmit={() => { 
        
                   KeyboardUtils.dismiss().then(() => submitSearch(textInputValue)); 
        
               }} 
        
               autoFocus={false} 
        
               onFocus={onFocus} 
        
               wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}} 
        
               wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused} 
        
               rightComponent={inputRightComponent} 
        
               autocompleteListRef={listRef} 
        
               ref={textInputRef} 
        
           />

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)

Proposal

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

After selecting from the suggested, the cursor is not moved to the end. It stays where it was

What is the root cause of that problem?

Cursor not moved to end because we are not passing selection props here in SearchInputSelectionWrapper for the smaller screen.

For the larger screen we already passed the selection props so it is working fine in larger screen.

App/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

Lines 337 to 340 in f01c7de

    
               ref={textInputRef} 
        
               selection={selection} 
        
               substitutionMap={autocompleteSubstitutions} 
        
           />

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

To fix this issue we should do following changes.

Pass the selection props in SearchInputSelectionWrapper here

For ex,

<SearchInputSelectionWrapper
    value={textInputValue}
    selection={selection}
    substitutionMap={autocompleteSubstitutions}
    onSearchQueryChange={onSearchQueryChange}
    isFullWidth
    onSubmit={() => {
        KeyboardUtils.dismiss().then(() => submitSearch(textInputValue));
    }}
    autoFocus={false}
    onFocus={onFocus}
    wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}}
    wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused}
    rightComponent={inputRightComponent}
    autocompleteListRef={listRef}
    ref={textInputRef}
/>

For smaller screen we are not updating selection state. So we need to update the selection state when option is selected using keyboard (same as we did for larger screen here) . For this we should replace setTextQuery={setTextInputValue} with setTextQuery={setTextAndUpdateSelection} here

For ex,

<SearchAutocompleteList
      autocompleteQueryValue={autocompleteQueryValue}
      searchQueryItem={searchQueryItem}
      onListItemPress={onListItemPress}
      setTextQuery={setTextAndUpdateSelection}
      updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
      ref={listRef}
  />

Improvement
Currently text in search field does not move to the end when report name is long. For this I already added proposal here . This both are different issues but still I added here for reference.

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

NA due to UI bug

What alternative solutions did you explore? (Optional)

@zanyrenney

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

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

@Ollyws

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

@thelullabyy

@thelullabyy any news?

@zanyrenney

@zanyrenney This one was deployed to production two weeks ago, can we process payment? Thanks!

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
2b. Reported on staging (deploy blocker)
2c. Reported on both staging and production
2d. Reported on a PR
2z. Other:

Who reported the bug:

[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: https://github.com/Expensify/App/pull/56326/files#r2095158581
[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:
[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:

Test:

1. Open the app
2. Navigate to the reports page
3. In the search bar, type the following: `status: all type: expense from: [The first letters of a user]
4. Choose from the suggested
5. Verify the cursor move to the end of text input

Do we agree 👍 or 👎

@zanyrenney

Bump on payment please @zanyrenney

@zanyrenney

@zanyrenney Could you please review @MarioExpensify comment in the GitHub issue? I was expecting a $75 payment for my contribution as mentioned there. Thanks

@zanyrenney

Bumped @zanyrenney, also let her know about your contribution @ishakakkad.

working on it now.

payment summary

$ 250 for thelullabyy for the PR implementation - paid via upwork.
$ 250 for Ollyws as the C+ - please request on ND.
$ 75 for ishakakkad for helping with the solution - paid $75 on upwork.

@ishakakkad

@ishakakkad sent you a job offer, please accept: https://www.upwork.com/nx/wm/offer/107409984

@zanyrenney

Thanks @zanyrenney accepted

Requested in ND.

payment summary complete, closing!

@Ollyws

$250 approved for @Ollyws

Navigation Menu

Repository navigation

[$250] mWeb/Chrome - Search - Cursor is not moved to the end after selecting for the suggestion #59646

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

32 remaining items

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

payment summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<SearchInputSelectionWrapper
	value={textInputValue}
	substitutionMap={autocompleteSubstitutions}
	onSearchQueryChange={onSearchQueryChange}
	isFullWidth
	onSubmit={() => {
	KeyboardUtils.dismiss().then(() => submitSearch(textInputValue));
	}}
	autoFocus={false}
	onFocus={onFocus}
	wrapperStyle={{...styles.searchAutocompleteInputResults, ...styles.br2}}
	wrapperFocusedStyle={styles.searchAutocompleteInputResultsFocused}
	rightComponent={inputRightComponent}
	autocompleteListRef={listRef}
	ref={textInputRef}
	/>

	ref={textInputRef}
	selection={selection}
	substitutionMap={autocompleteSubstitutions}
	/>

[$250] mWeb/Chrome - Search - Cursor is not moved to the end after selecting for the suggestion #59646

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Apr 4, 2025

thelullabyy commented on Apr 4, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

ishakakkad commented on Apr 5, 2025

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

melvin-bot commented on Apr 7, 2025

melvin-bot commented on Apr 8, 2025

melvin-bot commented on Apr 8, 2025

32 remaining items

MarioExpensify commented on May 7, 2025

Ollyws commented on May 13, 2025

Ollyws commented on May 19, 2025

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

Ollyws commented on May 19, 2025

ishakakkad commented on May 22, 2025

MarioExpensify commented on May 22, 2025

zanyrenney commented on May 22, 2025

zanyrenney commented on May 22, 2025

payment summary

zanyrenney commented on May 22, 2025

ishakakkad commented on May 22, 2025

Ollyws commented on May 22, 2025

zanyrenney commented on May 22, 2025

garrettmknight commented on Jun 3, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions