[HOLD for payment 2024-11-29] [$250] Search - The cursor is displayed on different sides in the search text box

@kadiealexander

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: 9.0.60-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5200040
Issue reported by: Applause Internal Team

Action Performed:

Sign in to the STG website with a Gmail account.
Tap on the search icon in the top right corner.

Expected Result:

The cursor must always appear at the beginning of the search text box.

Actual Result:

The cursor is displayed inconsistently on several sides of the search box each time the function is opened.
Issue happens only on iOS mWeb/Chrome.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6662018_1731377309304.Search.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021856557909155722434
Upwork Job ID: 1856557909155722434
Last Price Increase: 2024-11-13

Issue Owner

Current Issue Owner: @kadiealexander

@jliexpensify

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.

Proposal

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

The caret of the input is on the right. In my cases, it's moves to the left at the end.

What is the root cause of that problem?

I remember we had this kind of issue before on iOS safari which happens when we auto focus immediately while the input is sliding. I don't remember which issue that is, but if I remember correctly, they fix it by adding a delay. From my testing, this happens specifically because of the list heavy rendering which interrupt the caret moving. If we remove the list, then everything is smooth.

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

Lines 392 to 418 in cd3f30f

    
           <SearchRouterInput 
        
               value={textInputValue} 
        
               isFullWidth={shouldUseNarrowLayout} 
        
               updateSearch={onSearchChange} 
        
               onSubmit={() => { 
        
                   onSearchSubmit(textInputValue); 
        
               }} 
        
               routerListRef={listRef} 
        
               shouldShowOfflineMessage 
        
               wrapperStyle={[styles.border, styles.alignItemsCenter]} 
        
               outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]} 
        
               wrapperFocusedStyle={[styles.borderColorFocus]} 
        
               isSearchingForReports={isSearchingForReports} 
        
           /> 
        
           <SearchRouterList 
        
               textInputValue={textInputValue} 
        
               updateSearchValue={onSearchChange} 
        
               setTextInputValue={setTextInputValue} 
        
               reportForContextualSearch={contextualReportData} 
        
               recentSearches={sortedRecentSearches?.slice(0, 5)} 
        
               recentReports={recentReports} 
        
               autocompleteSuggestions={autocompleteSuggestions} 
        
               onSearchSubmit={onSearchSubmit} 
        
               closeRouter={onRouterClose} 
        
               onAutocompleteSuggestionClick={onAutocompleteSuggestionClick} 
        
               ref={listRef} 
        
           />

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

I'm trying to improve the performance, but no luck. In the meantime, we can hide the caret of the textinput while the modal is animating.

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

Lines 83 to 87 in 9b62f29

    
           <TextInput 
        
               testID="search-router-text-input" 
        
               value={value} 
        
               onChangeText={updateSearch} 
        
               autoFocus={autoFocus}

const [caretHidden, setCaretHidden] = useState(true);

useEffect(() => {
    InteractionManager.runAfterInteractions(() => setCaretHidden(false));
}, [])

caretHidden={false}

What alternative solutions did you explore? (Optional)

Remove the autoFocus props and delay the focus by using useAutoFocusInput hook.

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

Lines 83 to 87 in 99da1ac

    
           <TextInput 
        
               testID="search-router-text-input" 
        
               value={value} 
        
               onChangeText={updateSearch} 
        
               autoFocus={autoFocus}

const {inputCallbackRef} = useAutoFocusInput();

<TextInput ref={inputCallbackRef} ....

ios <> Android swap

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

@s77rt

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

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: Add SearchRouter component and context to display it #48785 (comment)
[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: n/a
[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:

Do we agree 👍 or 👎

@bernhardoj

Payouts due:

Contributor: $250 @bernhardoj via manual request
Reviewer: $250 @s77rt via manual request

Requested in ND.

@s77rt

$250 approved for @s77rt

@s77rt

@s77rt Thanks for classifying the bug!

For this one:

It really should have been marked as staging (or at least staging+prod, but that option might be going away soon).

You can see from the original description it was reproduced on both environments, and the screenshots show it was found on staging.

@tgolen

@tgolen If it's reproducible on production, it's reproducible on staging. Otherwise we'd close the issue.

True, I think what I'm trying to capture though is... was the bug found as part of the regression testing during a deploy, or was the bug released to production and then someone found it in production?

Maybe the prompts should be reworded?

Ah totally my bad. I just realised it said reported. I have been reading this as reproduced for a while 😅

Maybe the prompts should be reworded?

i think it's fine but maybe remove the (deploy blocker) suffix because it's a little misleading as in this case it was reported on staging but not a deploy blocker since it was found testing another flow

@bernhardoj

$250 approved for @bernhardoj

Navigation Menu

Repository navigation

[HOLD for payment 2024-11-29] [$250] Search - The cursor is displayed on different sides in the search text box #52382

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 alternative solutions did you explore? (Optional)

31 remaining items

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<SearchRouterInput
	value={textInputValue}
	isFullWidth={shouldUseNarrowLayout}
	updateSearch={onSearchChange}
	onSubmit={() => {
	onSearchSubmit(textInputValue);
	}}
	routerListRef={listRef}
	shouldShowOfflineMessage
	wrapperStyle={[styles.border, styles.alignItemsCenter]}
	outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]}
	wrapperFocusedStyle={[styles.borderColorFocus]}
	isSearchingForReports={isSearchingForReports}
	/>
	<SearchRouterList
	textInputValue={textInputValue}
	updateSearchValue={onSearchChange}
	setTextInputValue={setTextInputValue}
	reportForContextualSearch={contextualReportData}
	recentSearches={sortedRecentSearches?.slice(0, 5)}
	recentReports={recentReports}
	autocompleteSuggestions={autocompleteSuggestions}
	onSearchSubmit={onSearchSubmit}
	closeRouter={onRouterClose}
	onAutocompleteSuggestionClick={onAutocompleteSuggestionClick}
	ref={listRef}
	/>

	<TextInput
	testID="search-router-text-input"
	value={value}
	onChangeText={updateSearch}
	autoFocus={autoFocus}

[HOLD for payment 2024-11-29] [$250] Search - The cursor is displayed on different sides in the search text box #52382

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Nov 12, 2024

bernhardoj commented on Nov 12, 2024

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 alternative solutions did you explore? (Optional)

jliexpensify commented on Nov 13, 2024

melvin-bot commented on Nov 13, 2024

melvin-bot commented on Nov 13, 2024

31 remaining items

s77rt commented on Nov 24, 2024

BugZero Checklist:

Regression Test Proposal

Precondition:

Test:

kadiealexander commented on Nov 29, 2024

bernhardoj commented on Nov 29, 2024

JmillsExpensify commented on Nov 29, 2024

tgolen commented on Dec 2, 2024

s77rt commented on Dec 2, 2024

tgolen commented on Dec 2, 2024

tgolen commented on Dec 2, 2024

s77rt commented on Dec 2, 2024

s77rt commented on Dec 2, 2024

JmillsExpensify commented on Dec 5, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions