[HOLD for payment 2024-12-05] [$250] Onbording - Onboarding input is grayed out when select auto suggested name

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.54
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
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com
2. Login with new user
3. When onboarding modal opens select Something else
4. Start typing until auto suggested name appears
5. Select the suggested name

Expected Result:

Selected name should be black

Actual Result:

Name input is grayed out when select auto suggested name

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6645812_1729877258457.Recording__4337.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021851668566536953494
• Upwork Job ID: 1851668566536953494
• Last Price Increase: 2024-11-06
• Automatic offers:
• klajdipaja | Contributor | 104956195

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

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

[JmillsExpensify]

Opening up to the community.

[melvin-bot]

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

[melvin-bot]

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

[Shahidullah-Muffakir]

Proposal

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

Selected auto-suggested name or last name appears grayed out in the input field, returning to black only after the user modifies the text.

What is the root cause of that problem?

The root cause is that browser's default auto-fill/auto-suggest styling is overriding our custom text color styles

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

We should add the WebkitTextFillColor:theme.text to our baseTextInput styles
Here:

App/src/styles/index.ts

Lines 1226 to 1235 in aa6401d

	baseTextInput: {
	...FontUtils.fontFamily.platform.EXP_NEUE,
	fontSize: variables.fontSizeNormal,
	lineHeight: variables.lineHeightXLarge,
	color: theme.text,
	paddingTop: 23,
	paddingBottom: 8,
	paddingLeft: 0,
	borderWidth: 0,
	},

[Shahidullah-Muffakir]

Screen.20Recording.202024-10-31.20at.206.mp4

[s77rt]

Not able to reproduce

Screen.Recording.2024-10-31.at.8.55.00.AM.mov

[s77rt]

@Shahidullah-Muffakir Were you able to reproduce the bug? Any additional required steps?

[klajdipaja]

Edited by proposal-police: This proposal was edited at 2024-11-05 13:30:54 UTC.

Proposal

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

Input fields on the onboarding page (name and last name) have grayish color after the user loges in to expensify.
To reproduce this bug I had to set the theme in my MacOS to Light in addition to the steps by the reporter.

What is the root cause of that problem?

The root cause is that the global autofill-input styles that we apply in the ThemeProvier.tsx in this block:

App/src/components/ThemeProvider.tsx

Lines 24 to 26 in 664e657

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

The login page initiates a ThemeProvider with a static override in Dark mode and after the user is logged in the main ThemeProvider in App.tsx should be based on the system mode as Light.

The ThemeProvider does change to Light mode as we can see from all the styles that change in the main page. The problem is that since we are adding the styles in the ThemeProvider itself the styles that are added globally are of the latest mounted ThemeProvider and turnes out the last one is with a static override theme.

The render logic goes as below:

1. Main ThemeProvider (system)
2. Main ThemeProvider (system) Adds Autofill CSS
3. SignIn ThemeProvider (dark)
4. SignIn ThemeProvider (dark) Adds Autofill CSS
5. SignIn ThemeProvider (dark) is removed
   Now components will use the Main ThemeProvider (system) with light theme but the Autofill CSS is still from dark theme of the SignIn ThemeProvider.

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

The useEffect is not consistent with the way we use themes and should not be in the ThemeProvider but in a child component of it that has access to the useTheme context so that it can be rendered based on the updated theme from the ThemeProvider that wraps it.

I have tested it in ThemeStylesProvider.tsx and it works perfectly.

What alternative solutions did you explore? (Optional)

[Shahidullah-Muffakir]

@s77rt Yes, I was able to reproduce the bug in both Safari and Chrome.
Note: The issue does not occur if we refresh the page.

Safar:

Screen.20Recording.202024-10-31.20at.205.mp4

macOS Chrome:

Screen.20Recording.202024-10-31.20at.205-2.mp4

[s77rt]

@Shahidullah-Muffakir Thanks for the confirmation. Regarding the proposal, your RCA does not look correct as we do apply our custom auto-fill styles and seeing that it works on refresh confirms it.

[s77rt]

@klajdipaja Thanks for the proposal. Can you please elaborate on the RCA? Is it the double call to DomUtils.addCSS that causes the bug? It's not clear why the bug occurs given that the styles are overwritten

[klajdipaja]

@s77rt the double call is not the issue. It's the fact the we are loading these styles in the ThemeProvider and that opens the app up for race conditions when there are multiple ThemeProviders in the app. I added some console.log in the ThemeProvider and noticed that the last render of the provider has a staticThemePreference passed to it as DARK which is only done in the SignInPage.tsx: <ThemeProvider theme={CONST.THEME.DARK}> making it so that the latest styles added are actually for DARK mode.

[s77rt]

@klajdipaja Is it that the useEffect that runs last in ThemeProvider has the wrong theme? (staticThemePreference) If so, why this does not happen when we login with an existing account?

[klajdipaja]

@s77rt

Is it that the useEffect that runs last in ThemeProvider has the wrong theme? (staticThemePreference)

Yes, that's right. Which is then loading the global style with text color gray which is for dark mode.
This in my case happens for both login types (new and existing user) which I see by checking the style that is loaded in inspect element. Search for it in inspect element by id="autofill-input". In both cases for me I see the text color set to #E7ECE9.

Check this screenshots:

[s77rt]

@klajdipaja I'm still having trouble reproducing this. Is there some additional steps that I'm missing?

[klajdipaja]

@s77rt I can reproduce this all the time if I have the System->Appearance settings of my macOS set to Light.

[s77rt]

@klajdipaja Ah I see. Now i can reproduce. Isn't the ThemeProvider supposed to re-render when the theme changed?

[klajdipaja]

@s77rt It should re-render. That's what I am experiencing in a test I just did now

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[melvin-bot]

@JmillsExpensify @francoisl @s77rt @klajdipaja this issue is now 4 weeks old, please consider:

• Finding a contributor to fix the bug
• Closing the issue if BZ has been unable to add the issue to a VIP or Wave project
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[klajdipaja]

Will prepare the PR on Monday

[melvin-bot]

@JmillsExpensify, @francoisl, @s77rt, @klajdipaja Whoops! This issue is 2 days overdue. Let's get this updated quick!

[klajdipaja]

@s77rt PR is ready for review

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.67-9 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Skip adding DomUtils.getAutofilledInputStyle for static ThemeProvider #53057

If no regressions arise, payment will be issued on 2024-12-05. 🎊

For reference, here are some details about the assignees on this issue:

• @s77rt requires payment through NewDot Manual Requests
• @klajdipaja requires payment automatic offer (Contributor)

[melvin-bot]

@s77rt @JmillsExpensify @s77rt The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[s77rt]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production
• 2b. Reported on staging (deploy blocker)
• 2c. Reported on both staging and production
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  Link to comment: [TS migration] Migrate 'App.js' file to TypeScript #35242 (comment)

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: n/a

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

  Bug requires regression test: Yes

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

• System theme is light

Test:

1. Login with a new user
2. After the onboarding modal is displayed, select "Something else"
3. Start typing in the first name field until auto suggested names appear
4. Select any suggested name
5. Verify that the suggested name font color is dark and the name is readable

Do we agree 👍 or 👎

[JmillsExpensify]

Payment summary:

• Contributor: $250 @klajdipaja via Upwork
• Reviewer: $250 @s77rt via New Expensify

[JmillsExpensify]

Contributor paid via Upwork, regression test created, and remaining payments are via New Expensify. Closing this one!

[garrettmknight]

Payment summary:

• Contributor: $250 @klajdipaja via Upwork
• Reviewer: $250 @s77rt via New Expensify

[JmillsExpensify]

$250 approved for @s77rt