[$1000] iOS Safari - Additional cursor visible in wrong position when entering magic code in any page

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open new.expensify.com in Safari on iOS.
2. Enter any email/phone.
3. Enter the magic code digits 1 by 1.
4. Notice that the blue vertical cursor stays in the first digit slot and moves slightly towards the right as we enter more digits.

Expected Result:

The blue vertical cursor should not be visible at all since it is not visible in any apps/phone browsers/desktop app/desktop browsers.

Actual Result:

The blue cursor is visible in iOS safari. Moreover, its position was wrong.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.26-2
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

cursor_bug.mov

OCGQ9819.1.MP4

Expensify/Expensify Issue URL:
Issue reported by: @Nikhil-Vats
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686155622112579

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0149549af47f58f7a5
• Upwork Job ID: 1669721849027104768
• Last Price Increase: 2023-06-16

[melvin-bot]

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[hnkuanx]

Proposal

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

When user is entering magic code using IOS Safari Mobile browser, the text input cursor blinking caret are visible and shown in wrong position.

What is the root cause of that problem?

Currently, we have set caretHidden={isMobileSafari} at

App/src/components/MagicCodeInput.js

Line 339 in 93957f0

caretHidden={isMobileSafari}

However, caretHidden is actually supported only by react-native and Not a valid react-native-web TextInput props

For react-native-web, the right way to make the caret invisible is via the caretColor style.
See TextInputStyle definition from react-native-web code repo
https://github.com/necolas/react-native-web/blob/2a901e5fb11ac314c753867fbc5b87060ed05f53/packages/react-native-web/src/exports/TextInput/types.js#L14-L18

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

Solution 1 (take a step back approach):

High level idea:
Set the caret-color CSS at web/index.html to avoid platform dependent styling within styles.js (Note: there is already existing caret-color stylings in index.html)

Detailed Changes:

STEP1. Revert #18771 changes in MagicCodeInput.js , but keep those in styles.js

STEP2. Change

App/src/components/MagicCodeInput.js

Line 314 in e6c2704

<View style={[StyleSheet.absoluteFillObject, styles.w100, isMobileSafari ? styles.bgTransparent : styles.opacity0]}>

to

    <View
        style={[StyleSheet.absoluteFillObject, styles.w100, styles.bgTransparent]}
        // Used as CSS selector to customize caret-color style
        dataSet={{'magic-code-input': true}}
    >

STEP3. Change

App/src/components/MagicCodeInput.js

Lines 339 to 340 in e6c2704

	caretHidden={isMobileSafari}
	inputStyle={[isMobileSafari ? styles.magicCodeInputTransparent : undefined]}

to

    caretHidden
    inputStyle={[styles.magicCodeInputTransparent]}

STEP4. Add

    div[data-magic-code-input] input {
        caret-color: transparent;
    }

after

App/web/index.html

Lines 74 to 88 in e6c2704

	/* Customizes the background and text colors for autofill inputs in Chrome */
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus,
	textarea:-webkit-autofill,
	textarea:-webkit-autofill:hover,
	textarea:-webkit-autofill:focus,
	select:-webkit-autofill,
	select:-webkit-autofill:hover,
	select:-webkit-autofill:focus {
	-webkit-background-clip: text;
	-webkit-text-fill-color: #ffffff;
	caret-color: #ffffff;
	}

---

Solution 2 (previous idea):

We can make the caret invisible by adding caretColor: 'transparent', to styles.magicCodeInputTransparent here:

App/src/styles/styles.js

Lines 2479 to 2481 in 93957f0

	magicCodeInputTransparent: {
	color: 'transparent',
	},

In addition to that, we should unset caretHidden

App/src/components/MagicCodeInput.js

Line 339 in 93957f0

caretHidden={isMobileSafari}

as caretHidden is not a valid props for react-native-web, right now it is just setting false value for native apps, which is same as the default value.

[hnkuanx]

Would like to mention that this bug is only reproducible using an ACTUAL IPhone device, it is not reproducible using Mac IOS simulator.

Reason being Mac IOS simulator merely mimics the actual device, not emulating it (unlike Android Emulator), so it is expected to have some minor differences in behaviour between IOS simulator and IOS device.

See these links for lengthier explanation:
https://stackoverflow.com/a/4544605
https://stackoverflow.com/a/37665200

[kushu7]

Proposal

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

Additional cursor visible in wrong position when entering magic code in any page in mobile safari

What is the root cause of that problem?

This is regression of #18771.
for hiding caret and input we use opacity0 though we couldn't paste in mobile safari with opacity0.
for this it was changed to use styles.bgTransparent for mobile safari here.

App/src/components/MagicCodeInput.js

Line 314 in 93957f0

<View style={[StyleSheet.absoluteFillObject, styles.w100, isMobileSafari ? styles.bgTransparent : styles.opacity0]}>

but caretColor was not changed to 'transparent'. so we can see caret there on Safari.
so this is root cause of it.

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

To solve this problem we can add caretColor: 'transparent' to styles.magicCodeInputTransparent.

App/src/components/MagicCodeInput.js

Line 340 in 93957f0

inputStyle={[isMobileSafari ? styles.magicCodeInputTransparent : undefined]}

What alternative solutions did you explore? (Optional)

None

[hungvu193]

Proposal

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

When user is entering magic code using IOS Safari Mobile browser, the text input cursor blinking caret are visible and shown in wrong position.

What is the root cause of that problem?

We are setting magic code input color to transparent at

App/src/components/MagicCodeInput.js

Line 340 in 93957f0

inputStyle={[isMobileSafari ? styles.magicCodeInputTransparent : undefined]}

, however the caret color is still visible.

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

The blinking cursor is not shown in all other platforms, so it should not be shown for IOS Safari as well.

We can make the caret not visible by adding caretColor: 'transparent', to styles.magicCodeInputTransparent here:

App/src/styles/styles.js

Lines 2479 to 2481 in 93957f0

	magicCodeInputTransparent: {
	color: 'transparent',
	},

You need to make sure the paste feature in Safari still worked if you removed that. Because it was intentionally added in this PR by @akinwale

[hnkuanx]

Thanks a lot for the input, I am not suggesting removal though, my proposal is about adding additional styling.
Have verified that paste feature in Safari still works.

[akinwale]

Thanks a lot for the input, I am not suggesting removal though, my proposal is about adding additional styling. Have verified that paste feature in Safari still works.

Using caretColor will raise warnings that the style property is not supported. I think the key to fixing this issue would be to figure out why the caretHidden prop works in Safari on iOS 16.2 but is broken in 16.4. What changed between these versions?

[kushu7]

Using caretColor will raise warnings that the style property is not supported. I think the key to fixing this issue would be to figure out why the caretHidden prop works in Safari on iOS 16.2 but is broken in 16.4. What changed between these versions?

Its not related to Ios. caretHidden property is also not working in chrome.
You can test it by: making caretHidden= true and change View style from styles.opactiy0 to styles.bgTransparent

maybe its related to ReactNative

[hnkuanx]

It is actually related to react-native-web.
Updated my proposal with explanation.

Have tested my solution does not raise any warning as well

[strepanier03]

As explained above I can't recreate without a real iOS device, I tried in Browserstack without any luck.

I've asked for someone with an actual device to test here.