Issue with components rendering in dark mode

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.

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

Screenshots:



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!

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

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

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