Issue with components rendering in dark mode

Extensions
1

Howdy,

I’ve had several users report issues with certain POS UI extension components not rendering their input correctly.

Specifically, it seems to be rendering the input text with dark mode styling which makes it very difficult to work with, and borderline broken.

I believe everything is up-to-date, including the POS version, API version specific in TOML file, and UI extensions npm libraries.

The issue seems to occur with the FormattedTextField input, as well as the modals for the time and date picker inputs where the background is not updated.
The number and email fields for example, both work as expected.

This is the code I’m using for the FormattedTextField, which looks pretty safe. I’ve also tested with the example code and had the same result.

image
image933×337 23.6 KB

image
image1600×2380 133 KB

App / extension: https://partners.shopify.com/2916302/apps/46817247233/versions/541257859073

Screenshots:

image
image1632×2944 137 KB

image
image1308×2636 102 KB

image
image1652×2972 157 KB

Some possible issues I can think that might be causing it (outside of there being an issue with the components in this version).

  • I’m using in the components incorrectly (but I was able to reproduce with the boilerplate code)
  • I’m not using the right API version somewhere. Maybe it needs to be updated somewhere else in the TOML file?

Thanks!

2

Hi! We recently shipped a fix for this. What version of POS were you on? The latest should no longer have this bug.

1 Like
3

Thanks @JS_Goupil. Does look like the upgrade fixed it! Apologies I thought that was the first thing I checked. Thanks for taking a look.

1 Like
4

Hi. A bit unrelated, but I’m facing a different difficulty about FormattedTextField. When you use the currency type, it returns a formatted value that depends on the User’s locale, and the Shop’s currency.

Does Shopify provide a builtin functionality that can parse the result from FormattedTextField into a number?

I opened a topic about this in a different post but it didn’t receive any responses: Shopify POS UI extension TextField and FormattedTextField