[Due for payment 2025-05-28] [$250] mweb/Safari - Create Distance expense- Scroll up the address list, cursor displays above "Start"

[lanitochka17]

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.32-0
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
Issue reported by: Applause - Internal Team

Action Performed:

1. Open https://staging.new.expensify.com/
2. Tap on FAB
3. Tap Create Expense
4. Tap on Distance
5. Tap on Start
6. At Address, type "Ho"
7. Scroll up the suggested list some times

Expected Result:

Cursor should be hidden

Actual Result:

Cursor is displayed above "Start"

Workaround:

Unknown

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6811759_1745507112259.Hglv6305_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021916793388814148517
• Upwork Job ID: 1916793388814148517
• Last Price Increase: 2025-04-28

Issue Owner

Current Issue Owner: @allroundexperts

[melvin-bot]

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

[truph01]

🚨 Edited by proposal-police: This proposal was edited at 2025-04-24 22:05:08 UTC.

Proposal

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

• The text input cursor (caret) is visibly rendered above the "Start" header, even when the input field itself is hidden behind the header due to scrolling.

What is the root cause of that problem?

• This issue occurs because, on iOS Safari, the caret remains visible above the z-index of the header bar, even when the associated input is scrolled out of view. This is a known platform-specific bug on iOS.

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

• We can work around this iOS issue by dynamically hiding the caret (via the caretHidden prop) when the input is no longer visible on screen due to scrolling.

To implement this, we propose the following steps:

1. Introduce a new onScroll prop in the FormWrapper component
   Modify the FormWrapper to accept and pass down an onScroll prop to its ScrollView:

   
   <ScrollView ... onScroll={onScroll} />
   

App/src/components/Form/FormWrapper.tsx

Line 259 in b5c9d19

<ScrollView

2. Add a caretHidden prop to the AddressSearch component
   Extend AddressSearch to accept and pass the caretHidden prop to its TextInput:

   
   textInputProps={{
       ...
       caretHidden,
   }}
   

App/src/components/AddressSearch/index.tsx

Line 412 in b5c9d19

textInputProps={{

3. Implement scroll tracking and caret control in IOURequestStepWaypoint
   Define caretHidden state and an onScroll handler in IOURequestStepWaypoint.tsx:

   
   const [caretHidden, setCaretHidden] = useState(false);
   const onScroll = () => {
       textInput.current?.measureInWindow((x, y) => {
           if (y < variables.contentHeaderHeight - 10) {
               setCaretHidden(true);
           } else {
               setCaretHidden(false);
           }
       });
   };
   

   Then, wire these into the component:

   • Pass onScroll to FormWrapper:
     IOURequestStepWaypoint.tsx#L212
   • Pass caretHidden to AddressSearch:
     IOURequestStepWaypoint.tsx#L224

• This change should be only applied to the platform which encounters the bug.

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

• None

What alternative solutions did you explore? (Optional)

• We can hide the input caret on scrolling.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[flaviadefaria]

@allroundexperts, when you have some time, can you check @truph01's proposal?