[Payment due 05/06] [$250] iOS mWeb Chrome - Search - Cursor moves out of place in the search field

[jponikarchuk]

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.29-3
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: N/A
Email or phone of affected tester (no customers): htad26+urhjthy@gmail.com
Issue reported by: Applause Internal Team
Device used: iPhone/Chrome
App Component: Search

Action Performed:

1. Navigate to staging on iPhone Chrome
2. Navigate to a workspace chat
3. Tap on the search icon and observe the cursor
4. Tap on the back button then the search icon again and observe the cursor

Expected Result:

The cursor stays at the left side of the field

Actual Result:

The cursor moves out of place and out of the search field. Note the cursor jumps on the sign in page too.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021912924214492436720
• Upwork Job ID: 1912924214492436720
• Last Price Increase: 2025-04-17

Issue Owner

Current Issue Owner: @

[melvin-bot]

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

[bernhardoj]

Proposal

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

The cursor position is not correct when open the search router modal.

What is the root cause of that problem?

We previously fixed this issue before by hiding the caret until the modal is shown.

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

Lines 25 to 26 in 82eb858

	// On mWeb Safari, the input caret stuck for a moment while the modal is animating. So, we hide the caret until the animation is done.
	const [shouldHideInputCaret, setShouldHideInputCaret] = useState(isMobileWebSafari);

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

Lines 41 to 42 in 82eb858

	onModalHide={() => setShouldHideInputCaret(isMobileWebSafari)}
	onModalShow={() => setShouldHideInputCaret(false)}

However, we only applied it to mobile web safari. In OP case, it's an iOS chrome, so the fix isn't applied.

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

I don't have a physical device to run the iOS chrome, but I believe we can fix it by hiding the caret for isChromeIOS too. Or, we can apply it to all iOS mobile web by adding a new function in Browser.ts, isMobileIOS, and use it instead.

const isMobileIOS = () => {
    const userAgent = navigator.userAgent;
    return /iP(ad|od|hone)/i.test(userAgent);
};

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

I think the only thing we can test is the isMobileIOS.

[Christinadobrzyn]

This seems to only be happening in Chrome on iOS - it can see the cursor jumps everywhere, even on the sign-in page. I'm not sure if we want to prioritize this. Asking - https://expensify.slack.com/archives/C05LX9D6E07/p1744910232339549

[melvin-bot]

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

[melvin-bot]

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