Web - LHN - Console error when clicking FAB button

[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!

---

Action Performed:

1. Go to URL https://staging.new.expensify.com/
2. Login with any account
3. Click on the green plus button (FAB)

Expected Result:

No console error when clicking FAB button

Actual Result:

Console error when clicking FAB button

Workaround:

Unknown

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.35.4
Reproducible in staging?: y
Reproducible in production?: n
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

Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal team
Slack conversation:

View all open jobs on GitHub

[OSBotify]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open StagingDeployCash deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot]

Triggered auto assignment to @PauloGasparSv (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[kbecciv]

@PauloGasparSv Console error when clicking on emoji picker, let me know if we need a separate bug for it.

[alitoshmatov]

Might be helpful

Error is originating here:

App/src/styles/StyleUtils.js

Lines 711 to 715 in 0a39078

	function getThemeBackgroundColor(bgColor = themeColors.appBG) {
	const backdropOpacity = variables.modalFullscreenBackdropOpacity;
	const [backgroundRed, backgroundGreen, backgroundBlue] = hexadecimalToRGBArray(bgColor);
	const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(themeColors.modalBackdrop);

where bgColor is not in hexadecimal form but in rgba form, which is causing hexadecimalToRGBArray to return undefined.

This function is called here:

App/src/components/Modal/index.web.js

Line 33 in 40708cb

setStatusBarColor(isFullScreenModal ? themeColors.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));

This value is coming from here:

App/src/libs/StatusBar/index.web.js

Lines 4 to 10 in 722ef00

	StatusBar.getBackgroundColor = () => {
	const element = document.querySelector('meta[name=theme-color]');
	if (!element || !element.content) {
	return null;
	}
	return element.content;
	};

I think this bug was introduced in this PR: #20805

[kushu7]

I'm working on this regression.

[situchan]

Dupe of #21833 and already being worked there

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[PauloGasparSv]

Issue reported by: Applause - Internal team

Dupe of #21833 and already being worked there

Thks team, I'll close this as it is a Duplicate of #21833 (similar to #21952)

Also removing the DeployBlocker label from here since it's a regression and it started in #20516