iOS - Status - Cursor jumps behind the minutes after entering hour

[kbecciv]

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: 1.4.65-0
Reproducible in staging?: y
Reproducible in production?: y
Issue found when executing PR: #40390
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch New Expensify app.
2. Go to Account settings > Profile > Status.
3. Go to Custom > Time.
4. Clear minutes and hour.
5. Enter only hour.

Expected Result:

The digit will jump to the next value.

Actual Result:

The digit jumps to the end of minutes.

Workaround:

n/a

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6460120_1713956450728.RPReplay_Final1713956117.mp4

View all open jobs on GitHub

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb

[kbecciv]

@muttmuure FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributor.

[Krishna2323]

Proposal

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

iOS - Status - Cursor jumps behind the minutes after entering hour

What is the root cause of that problem?

The selection is correctly set to the start but when the we focus on the input the caret is placed at the end, I think that this is the default behaviour in iOS devices. I also tested on other inputs and the behaviour is the same, no matter what is the current selection position, on initial focus the caret will be placed at the end.

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

To resolve this issue, we can set the selection to any value when the hour input is focused. This will resolve the issue because if we focus on the minute input after the hour input, the selection will be {end: 100, start: 100}, and the cursor will be placed at the correct position because we are changing the selection when the input is focused.
onFocus={() => setSelectionMinute({end: 100, start: 100})}

Optionally we can hide the care when the selection is 100 to avoid any kind of flickering.
caretHidden={selectionMinute.start === 100}

What alternative solutions did you explore? (Optional)

N/A

Before fix

before_fix.mp4

After fix

after_fix.mp4

[melvin-bot]

@muttmuure Huh... This is 4 days overdue. Who can take care of this?

[muttmuure]

Not a priority