[HOLD for payment 2024-02-07] [$500] Theme - Input in Merchant field isn't visible in light mode when select item from suggest list

[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: 1.4.14-0
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Precondition: App is setup on Light theme

1. Navigate to staging.new.expensify.com
2. Start Request money> Manual flow
3. On Manual page select Merchant
4. Use Merchant from suggestion link

Expected Result:

Selected Merchant should be visible in input field

Actual Result:

Selected Merchant is not visible in input field. Letters are light just like the theme

Workaround:

Unknown

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

Bug6320244_1703017103807.Recording__1596.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01704ce5a9ef62e618
• Upwork Job ID: 1737228586984062976
• Last Price Increase: 2023-12-19
• Automatic offers:
• aimane-chnaif | Reviewer | 28066426
• tienifr | Contributor | 28066427

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Theme - Input in Merchant field isn't visible in light mode when select item from suggest list

What is the root cause of that problem?

For text from suggested list we use custom styles
In our case we have a white fill color

App/web/index.html

Lines 93 to 97 in df98114

	select:-webkit-autofill:focus {
	-webkit-background-clip: text;
	-webkit-text-fill-color: #ffffff;
	caret-color: #ffffff;
	}

I also think that the problem is also relevant for the caret

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

We have several ways

1. Easy
   Just choose a neutral color that will suit the light and dark theme

2. Easy (2)
   We can just add a little shadow
   Which will contrast perfectly with the background and will not affect the dark theme in any way

3. Easy (3)(Looks dangerous)
   We can delete this styles
   I understand why this was added
   Because before we use specific inputs
   But now I think This is not very relevant

4. Harder
   During project initialization and during theme selection, we can customize our styles
   And depending on the theme, use a specific color

Similar to what we do for a splash screen

App/src/libs/BootSplash/index.ts

Lines 12 to 15 in df98114

	const splash = document.getElementById('splash');
	if (splash) {
	splash.style.opacity = '0';
	}

But these are all just suggestions
Because we need the designers' opinion

What alternative solutions did you explore? (Optional)

NA

Update

So that there are no disputes in the future that someone spied on someone
One of my options is similar to the second proposition
Which were sent at the same time ))

Screen.Recording.2023-12-20.at.00.18.53.mov

[yh-0218]

Proposal

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

Theme - Input in Merchant field isn't visible in light mode when select item from suggest list

What is the root cause of that problem?

We have custom autofill color.

App/web/index.html

Line 95 in aa1d87c

-webkit-text-fill-color: #ffffff;

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

We need to variable for this.

     -webkit-background-clip: text;
     -webkit-text-fill-color: var(--text-color);
     caret-color: var(--text-color);

and need to set --text-color on style of BaseTextInput here

{'--text-color': theme.text}

Screen.Recording.2023-12-20.at.1.28.26.PM.mov

What alternative solutions did you explore? (Optional)

[tienifr]

Proposal

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

Selected Merchant is not visible in input field. Letters are light just like the theme.

What is the root cause of that problem?

In here, we're setting the white color to autofilled inputs, this is to fix a bug where sometimes browsers add special styles to text inputs if those inputs are autofilled, for example Chrome on iOS will add yellow color.

This will work fine for the default dark theme we have earlier, but since now light theme is supported, the white color on light theme will cause UI problem.

In fact we should not set it as #ffffff, we should set it equal to the text color of that theme, in case of dark mode it will be #002E22 (white-ish but not white).

Also the reason why we have to put it in CSS is because there's no native way in React to target the autofill pseudo class of an input.

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

We need to use different CSS with correct theme colors.

To do that we can (the below changes are only needed for web platform):

• Add a new addCSS method to addCSS during run time, it will look like below (the script might seem long but in simple terms, it will replace existing style tag if it already exists, if not it will append another style tag with the correct CSS), we can try to simply it a bit later during PR process.

function addCSS(css, styleId) {
    var head = document.getElementsByTagName('head')[0];
    var existingStyle = document.getElementById(styleId);

    if (existingStyle) {
        // If style tag with the specified ID exists, update its content
        if (existingStyle.styleSheet) {   // IE
            existingStyle.styleSheet.cssText = css;
        } else {                          // the world
            existingStyle.innerHTML = css;
        }
    } else {
        // If style tag doesn't exist, create a new one
        var s = document.createElement('style');
        s.setAttribute("id", styleId);
        s.setAttribute('type', 'text/css');

        if (s.styleSheet) {   // IE
            s.styleSheet.cssText = css;
        } else {              // the world
            s.appendChild(document.createTextNode(css));
        }

        head.appendChild(s);
    }
}

• In here, add an useEffect to listen to theme change (or more specifically theme.text change). If it changes, add the proper autofill CSS with the correct theme.text color

useEffect(() => {
        addCSS(getAutofilledInputStyle(theme.text), 'autofill-input')
}, [theme.text]);

• We can add getAutofilledInputStyle as a style util for use above

const getAutofilledInputStyle = (inputTextColor) => {
    return `
        input[chrome-autofilled],
        input[chrome-autofilled]:hover,
        input[chrome-autofilled]:focus,
        textarea[chrome-autofilled],
        textarea[chrome-autofilled]:hover,
        textarea[chrome-autofilled]:focus,
        select[chrome-autofilled],
        select[chrome-autofilled]:hover,
        select[chrome-autofilled]:focus,
        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: ${inputTextColor};
            caret-color: ${inputTextColor};
        }
    `
}

The above are reusable for any case where we need to use theme-specific CSS.

What alternative solutions did you explore? (Optional)

NA

[aimane-chnaif]

@tienifr thanks for the proposal. Can you share your branch for testing?