Shopify POS UI extension TextField and FormattedTextField

Retail & Point of Sale

Topic summary

Issues integrating Shopify POS UI Extensions’ TextField and FormattedTextField on the latest version.

  • TextField: Confusion over onInput vs onChange. Docs suggest onInput for validation and onChange to update state, but both fire equally; if state isn’t set every time in onChange, internal and external state diverge.

  • TextField error handling: Setting the error prop during onInput shows the error, but clearing the validation does not remove the error state in the UI.

  • FormattedTextField: Inherits the same onInput/onChange concerns. When a currency type is set, the displayed value appears localized (likely via Intl.NumberFormat), making it difficult to reliably parse out the numeric value and currency across different grouping/decimal formats. Guidance requested on robust parsing to number + currency (top priority).

  • FormattedTextField rendering: Updating state from outside onChangeText does not re-render the field as expected.

  • Code snippets were referenced but not effectively provided; behavior is described without runnable examples.

Status: Unresolved. The poster seeks clarification on event semantics, error-state clearing, locale-safe parsing, and controlled component updates.

Summarized with AI on December 15. AI used: gpt-5.
1

I am struggling to use those components. I om on the latest version.

The TextField:

  • I don’t understand the onInput and onChange methods. The documentation says we should use onInput for validation for example, and onChange to actually update the value (i.e., using setState)? The onInput and onChanged are triggered the same number of times, so why the difference? I found that if I do not set the state each time in onChanged, then the states start to diverge
  • If I get into an error state while doing validation via onInput, and I set some error into the error field, the view updates showing the errored input, but if I correct the state and the data is valid, it does not render to show that there isn’t an error anymore?

The FormattedTextField:

  • Same issues with the above, but in addition
  • When I set the currency type, I get a strange output which I am guessing comes from Intl.NumberFormat? However, it is extremely difficult to parse the value considering the currency positioning, the various grouping, . or , for decimals, etc. How can I parse that such that I get the number and the currency? — this is the most important part
  • If I change the state outside of the onChangeText for the field, it does not render that for some reason?

Some brief code snippets of how I use them