[Awaiting Checklist] [Due for payment 2025-09-02] [$250] Search - Cursor is not visible when pasting a long text in search field

[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: 9.1.84-3
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://github.com/Expensify/Expensify/issues/493003
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Device used: macOS Sequoia 15.5
App Component: Search/Router

Action Performed:

1. Go to staging.new.expensify.com
2. Copy a long search query (eg, type:expense workspace:BD19AF1A66B0E7D8 hey hey hey hey hey hey hey hey)
3. Click on the search modal on the top right.
4. Paste the long search query.

Expected Result:

The cursor will remain visible at the end.

Actual Result:

The cursor is not visible. User will have to scroll to the end to see the cursor.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6897526_1753367872239.20250724_223422.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021950786823905045910
• Upwork Job ID: 1950786823905045910
• Last Price Increase: 2025-07-31
• Automatic offers:
• Krishna2323 | Contributor | 108265751

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

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

[Krishna2323]

Proposal

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

Search - Cursor is not visible when pasting a long text in search field

What is the root cause of that problem?

• The loading indicator container always takes the required space once the inputProps.isLoading turns to a boolean and in SearchAutocompleteInput, we are using animated TextInputClearButton, so there are two icons.
• When pasting long text into the input, the input field expands to fill all available width (excluding the TextInputClearButton). However, once inputProps.isLoading is set to true, the ActivityIndicator appears, causing the text input to shrink slightly and cursor to be hidden.
  

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

  Lines 464 to 476 in 4b68aa8

  	{inputProps.isLoading !== undefined && (
  	<ActivityIndicator
  	size="small"
  	color={theme.iconSuccessFill}
  	style={[
  	StyleUtils.getTextInputIconContainerStyles(hasLabel, false),
  	styles.ml1,
  	styles.justifyContentStart,
  	loadingSpinnerStyle,
  	StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
  	]}
  	/>
  	)}

  
  

  App/src/components/Search/SearchAutocompleteInput.tsx

  Lines 244 to 255 in 4b68aa8

  	{!!value && (
  	<Animated.View
  	style={styles.pr3}
  	layout={SearchFiltersButtonTransition}
  	>
  	<TextInputClearButton
  	onPressButton={clearFilters}
  	style={styles.mt0}
  	/>
  	</Animated.View>
  	)}
  	</Animated.View>

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

We have multiple ways to solve this issue:

1. Instead of using the loading indicator from the input, we should render it inside SearchAutocompleteInput, we will hide the TextInputClearButton when isSearchingForReports is true. We also need to remove isLoading prop and loadingSpinnerStyle.

{!!value && (
    <Animated.View
        style={styles.pr3}
        layout={SearchFiltersButtonTransition}
    >
        {!isSearchingForReports ? (
            <TextInputClearButton
                onPressButton={clearFilters}
                style={styles.mt0}
            />
        ) : (
            <ActivityIndicator
                size="small"
                color={theme.iconSuccessFill}
                style={[
                    StyleUtils.getTextInputIconContainerStyles(false, false),
                    styles.ml1,
                    styles.justifyContentStart,
                    StyleUtils.getOpacityStyle(1),
                    styles.mt0,
                    styles.mr0,
                    styles.justifyContentCenter,
                ]}
            />
        )}
    </Animated.View>
)}

2. Always pass a boolean to isLoading prop of TextInput, so the loading indicator always takes the required space and the input is rendered in the available space. Update the prop value isSearchingForReports to !!isSearchingForReports
3. Update the condition below to !!inputProps.isLoading &&.
   

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

   Line 464 in 4b68aa8

   {inputProps.isLoading !== undefined && (

4. We can use shouldShowClearButton prop TextInput and remove the animated clear button in SearchAutocompleteInput, this will also required to add some props in TextInput to modify the clear button.

• We should check for similar bugs in other components also, where we are using multiple icons. If we decide to update the text input component then we have to make changed in the native file also.

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

N/A

What alternative solutions did you explore? (Optional)

Result

Result after solution 1

Details

Monosnap.screencast.2025-07-27.00-33-08.mp4

Result after solution 2

Details

Monosnap.screencast.2025-07-27.00-35-09.mp4

Result after solution 3

Details

Monosnap.screencast.2025-07-27.00-40-48.mp4

[lorretheboy]

🚨 Edited by proposal-police: This proposal was edited at 2025-08-01 14:08:32 UTC.

Proposal

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

Search - Cursor is not visible when pasting a long text in search field

What is the root cause of that problem?

The loading indicator occupies space whenever isLoading has a boolean value—true, false, or even undefined as seen here. When a long string is pasted or the user types until the input reaches its full width, and the loading indicator appears for the first time, the input reserves space for the clear button (due to isLoading being true). This causes the ActivityIndicator to render over the suffix area, pushing the text and making the cursor invisible.

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

Lines 464 to 476 in feb0965

	{inputProps.isLoading !== undefined && (
	<ActivityIndicator
	size="small"
	color={theme.iconSuccessFill}
	style={[
	StyleUtils.getTextInputIconContainerStyles(hasLabel, false),
	styles.ml1,
	styles.justifyContentStart,
	loadingSpinnerStyle,
	StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
	]}
	/>
	)}

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

Solution to reserve the area for loading, we just need to remove condition here

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

Line 464 in 4b68aa8

{inputProps.isLoading !== undefined && (

Other solutions:
Should check explicit inputProps.isLoading === true here so that the loading indicator will only appear when it actually in loading state

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

Line 464 in feb0965

{inputProps.isLoading !== undefined && (

Then the opacity style will be alway 1 StyleUtils.getOpacityStyle(1)

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

Line 473 in feb0965

StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),

Result:

Screen.Recording.2025-07-27.at.04.27.34.mov

Additionally, If we want to place the loading indicator over the clear button in loading state. This way, we only have 1 suffix icon either loading indicator or clear button

Check !isSearchingForReports as well

App/src/components/Search/SearchAutocompleteInput.tsx

Line 244 in e36300d

{!!value && (

Replace styles.ml1 by

styles.ph1,
styles.ml2,

Styles can be updated by on specific requirements if needed

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

Line 470 in feb0965

styles.ml1,

Result:

Screen.Recording.2025-07-27.at.04.26.54.mov

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

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.

[kpadmanabhan]

Proposal

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

Cursor not visible in search RHN for long pasted text.

The same behaviour is seen if you switch to another window and come back to new expensify, the cursor is missing, irrespective of whether it is pasted text or typed text. This is not an issue with long text. This is seen with short one word text as search input.

What is the root cause of that problem?

There are 2 problems here.

• cursor going hidden due to appearance of activity indicator thats loaded for a long text
• text field out of focus the moment we switch windows an hence while returning, focus is not on the text field and hence cursor is not displayed

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

isLoding is assigned to isSearchingForReports which should have been a background activity. Also visible area should have been 1 space more to display blinking cursor.
https://github.com/Expensify/App/blob/e36300de578fb39e3dc1a102a1cdfda5c710fd4d/src/components/Search/SearchAutocompleteInput.tsx#L236C25-L242

Visibility of activity indicator is set to true once isLoading is true as well.

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

Lines 464 to 476 in 4b68aa8

	{inputProps.isLoading !== undefined && (
	<ActivityIndicator
	size="small"
	color={theme.iconSuccessFill}
	style={[
	StyleUtils.getTextInputIconContainerStyles(hasLabel, false),
	styles.ml1,
	styles.justifyContentStart,
	loadingSpinnerStyle,
	StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
	]}
	/>
	)}

Explicitly check for inputProps.isLoading === true from state, alongside undefined check, to ensure that it is visible only during actual loading of reports, instead of always.

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

Lines 464 to 476 in feb0965

	{inputProps.isLoading !== undefined && (
	<ActivityIndicator
	size="small"
	color={theme.iconSuccessFill}
	style={[
	StyleUtils.getTextInputIconContainerStyles(hasLabel, false),
	styles.ml1,
	styles.justifyContentStart,
	loadingSpinnerStyle,
	StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
	]}
	/>
	)}

Also check if isSearchingForReports explicitly to decide whether to show activity indicator or not.

App/src/components/Search/SearchAutocompleteInput.tsx

Lines 244 to 248 in e36300d

	{!!value && (
	<Animated.View
	style={styles.pr3}
	layout={SearchFiltersButtonTransition}
	>

For the lost focus of text control while switching windows (ALT + TAB), pressing of ALT takes control to chrome settings button. This is a default chrome behaviour. Similar is with clicking on another window using mouse. Persist the tab index to state onLostFocus of window and set it back from state onWindowActive.

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

N.A.

What alternative solutions did you explore? (Optional)

N.A.

[RachCHopkins]

Legit long query (let's not use garbage):

type:expense status:paid,approved,done group-by:reports feed:"testing 11121",,"Expensify Demo 11121" currency:USD expense-type:card reimbursable:no date<2025-06-30

I'm seeing the cursor. I can't repro this.

My version is v9.1.86-3 so maybe it's fixed already.

[RachCHopkins]

Or maybe we just need better repro steps, it looks like @kpadmanabhan may have already come up with better repro steps here.

[Krishna2323]

@RachCHopkins, you can try directly pasting type:expense workspace:9132779747441AFB reportid:R00F3Ilaf4A8 date: or paste type:expense workspace:9132779747441AFB reportid:R00F3Ilaf4A8 date:2025-07-04, then select 2025-07-04 by dragging cursor and remove it.

Monosnap.screencast.2025-07-30.13-14-33.mp4

[kpadmanabhan]

Or maybe we just need better repro steps, it looks like @kpadmanabhan may have already come up with better repro steps here.

@RachCHopkins : I am having 100% reproducibility using the steps mentioned in the description in Windows Chrome browser.
Screenshot of the same is posted here
The text being pasted just need to be long enough for the cursor to be hidden under the activity indicator. Content of the text pasted is not relevant.

Also additionaly I noticed that switching window and coming back to expensify takes the cursor focus away from the search text field.

[izarutskaya]

Reproducible on Windows 10/Chrome/Build 9.1.87-2

2025-07-30.12-15-14.mp4

[RachCHopkins]

Thanks everyone!