[HOLD] [$250] Firefox - All the dropdown options appear gray in color and different font

[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. Access staging.new.expensify.com
2. Log in any account
3. Navigate to settings by clicking on the user avatar over LHN
4. Click on Profile
5. Click on “Preferred Pronouns” or Select any of the dropdowns in the settings page (preferences, or from the workspace editor)

Expected Result:

Dropdowns will have same font as in the app and background color should be white

Actual Result:

Dropdown options appear gray backgroud color and different font

Workaround:

Visual

Platform:

Where is this issue occurring?

• Web - Firefox

Version Number: 1.1.73-0

Reproducible in staging?: Y

Reproducible in production?: Y

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos:

Upwork Job Link: https://www.upwork.com/jobs/~011c612d785f81ca45

Issue reported by:
Applause internal team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[flodnv]

Weird/interesting, this is only a problem in firefox (not chrome) 😄

@kavimuru do you know if it was a regression?
For whomever gets to work on this, I'm curious to know where this problem is from (and if we can track it to a regression).

[melvin-bot]

Triggered auto assignment to @michaelhaxhiu (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[kavimuru]

This is occurring only in Windows / FF. Not in Windows chrome or Mac / Safari. Tester found this issue doing some exploratory in FF with regression steps.

[flodnv]

I saw it on my Firefox Mac in another "Style":

[michaelhaxhiu]

Posted to upwork, link here - https://www.upwork.com/jobs/~011c612d785f81ca45

[melvin-bot]

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

[melvin-bot]

Current assignee @flodnv is eligible for the Exported assigner, not assigning anyone new.

[JosueEchandiaAsto]

Proposal

Issue

Dropdown options appear gray backgroud color and different font

As it currently looks

Mac/Safari/Dark mode

Mac/Chrome/Dark mode

Mac/Mozilla/Dark mode

Mac/Safari/Light mode

Mac/Chrome/Light mode

Mac/Mozilla/Light mode

Fix

Firefox doesn't allow setting fontFamily in if this font is not installed on the device since the page is consulted.

For example:
Set Futura font to that is install.

Everything works well.

But if you remove Futura from the device.

We have the same problem.

Now, knowing that the required font cannot be assigned, how do we avoid displaying such a different font.
We can assign a font for when a browser can't get the font we want. It's like a backup font.
Even better, assign a group of fonts that looks like ours. In this case Sans-Serif o font-family: 'revert'

Option 1: With font-family: 'revert' (Best option)
Revert property

Option 2: With fontFamily: 'GTAmericaExp-Regular, Sans-Serif'

Between option 1 or option 2 there is only a slight difference in the font when the list of options is displayed.

This proposal would only affect Web/Mozilla and all dropdowns will be fixed

[flodnv]

Thanks for the insights! Which font is it not getting? Can we not somehow force install it?

[JosueEchandiaAsto]

GTAmericaExp-Regular is the font that this view is using.
We cannot force the installation of any font on the devices.

[flodnv]

Thanks. Pardon my ignorance -- how does this work on other platforms / devices?
@mananjadhav what are you thoughts?

[JosueEchandiaAsto]

@flodnv In webkit browsers (chrome, safari). the option tag can't be styled through CSS. This depends on the operating system.
In Firefox, some styles can be styled via CSS, for example: font-family can be assigned a custom font, but it depends on whether the font exists in the OS.

This is a list of option tag:

[mananjadhav]

Please give me time to check possible causes for FF. I vaguely we had set up @font-face and relative paths to the fonts in FF for other projects. Let still find some information and get back.

Thank you for your comments @JosueEchandiaAsto.

[mananjadhav]

Thanks for the insights @JosueEchandiaAsto. It was really helpful.

@flodnv I spent some time digging into different approaches to solve this. @JosueEchandiaAsto is right, that the option tag doesn't inherit the page/parent font. We can set styles like bold, etc, but not font-family.

I tried multiple faces to force font and @font-face, etc. but none of them worked. I also checked other apps like Slack. They don't use the default select-option tag for dropdown, but a custom implementation with div-span.

We have the following ways to approach this:

1. Do nothing as no functionality is breaking or is such a bad UX which makes the app/feature unusable. Firefox has about 7% users.
2. Add a fallback font like Serif that Firefox supports by default.
3. Replace the Picker component to something that uses div-span so that appropriate styling can be performed.

Let me know your thoughts.

[flodnv]

Thanks @mananjadhav. I posted in Slack about this https://expensify.slack.com/archives/C01GTK53T8Q/p1655492405932969 (which we should do when we have to make such big decisions)

[michaelhaxhiu]

@flodnv & @mananjadhav - Should we hold on doubling the price of this job this until we reach a verdict on how to style dropdown options in New Expensify? Seems like it's going to be discussed this week.

[mananjadhav]

Should we hold on doubling the price of this job

I agree. We should hold and finalize the acceptance criteria first.

[flodnv]

Agreed, HOLDing!

[michaelhaxhiu]

No update yet, but Flo and I gave a nudge to the Slack thread here for input.

[michaelhaxhiu]

Closing per discussion in the slack thread above 👆 . This will be fixed when we re-work the push to page functionality (i.e. dropdowns are going away).