Shopify POS UI extension TextField and FormattedTextField

Partner Discussions
,
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

              <TextField
                key={amountErr}
                title="Amount to pay"
                label="Amount to pay"
                required
                isValid={amountErr === undefined}
                error={amountErr}
                value={amountToPay}
                onInput={(value) => {
                  if (!digitRegex.test(value)) {
                    setAmountErr(AMOUNT_INVALID);
                    return;
                  }

                  const num = Number.parseFloat(value);
                  if (num > cartTotal) {
                    setAmountErr(AMOUNT_TOO_LARGE);
                    return;
                  }

                  setAmountErr(undefined);
                }}
                onChange={setAmountToPay}
              />


            <FormattedTextField
              key={inputKey}
              title="Amount to pay"
              inputType="currency"
              initialValue={amountToPay}
              onChangeText={(value) => {
                const [currency, amount] = value.split(/\s/); // does not work for every locale
                const num = Number.parseFloat(amount.replaceAll(",", "")); // nope
              }}
              errorMessage="The amount must be less or equal than the cart total."
            />