POS UI Extensions NumberField Comma

Extensions
1

Hello, i discovered a bug with the NumberField in my POS Extension. If you set inputMode=“decimal” and your devices number format is “1.000,00” you can not input decimal numbers. As the , is not accepted by the NumberField.

1 Like
3

Hey @andre-hyghstreet, thanks for the report! We are looking in to that and I’ll report back here with what I find.

5

Hi, any update here?

I need in my POS UI extension, and most of my merchants are German, which means they’ll use the comma as decimal separator.

6

Hey @Felix_Wu, the original reported issue should be resolved now. Are you still seeing this happen? If so, can you share some details on your implementation so we can take a closer look?

7

Hi,

No, it still doesn’t work, the comma gets immediately erased:

My code:

const [cashAddAmount, setCashAddAmount] = useState(0);

<s-number-field
            label={t({
              de: "Betrag (erforderlich)",
              en: "Amount (required)",
            })}
            value={cashAddAmount.toString()}
            inputMode="decimal"
            onInput={(e: { currentTarget: { value?: string } }) => {
              setCashAddAmount(Number(e.currentTarget.value ?? 0));
            }}
            onChange={(e: { currentTarget: { value?: string } }) => {
              setCashAddAmount(Number(e.currentTarget.value ?? 0));
            }}
          ></s-number-field>
8

Thanks for sharing that. I think I might see what’s happening!

From what I can find, JavaScript’s Number() function only recognizes . as a decimal separator, so Number("5,5") actually returns NaN, which could explain why the value gets erased.

Could you try normalizing the value before parsing it to see if that helps?

9

Hey, yes I also already tried

setCashAmount(Number(e.currentTarget.value.replace(",", ".") ?? 0));

as well as just using a plain string instead of number.

10

Thanks for testing that Felix. We are looking in to this and I’ll update here when we have some more clarity.

11

Thank you. Do you have any workaround in the meantime?

12

Hey @Felix_Wu, quick update: would you be able to share a few more details to help us narrow down what’s happening. Could you share your device locale settings (found in Settings → General → Language & Region), the iOS version you’re running, and confirm any if there is any logic around NumberField value formatting on your end?

If possible, a short video that also shows the device locale in your settings before reproducing the issue would be super helpful if you get a chance.

13

Hey @Felix_Wu, are you still experiencing this issue?

14

Hi @KyleG-Shopify ,

yes I am, sorry I didn’t get around to post your requested details yet.

  1. Locale Settings: Language English, Region Germany (see screencast)
  2. iOS version: 26.2.1

Screencast:

Entire Code (Modal.jsx):

import { render } from "preact";
import { useState } from "react";

export default async () => {
  render(<Extension />, document.body);
};

function Extension() {
  const { i18n } = shopify;

  const [discount, setDiscount] = useState("10");

  const handleChange = (event) => {
    const value = event.currentTarget.value; // string from the component

    setDiscount(value);
  };

  return (
    <s-page heading={i18n.translate("modal_heading")}>
      <s-stack gap="base">
        <s-number-field
          label="Discount"
          value={discount}
          onChange={handleChange}
        />
      </s-stack>
    </s-page>
  );
}
15

Thank you. I’ve passed this on and we are looking in to it. I’ll update you here if there’s anything else we need and with any solutions.

16

Hi Everyone, this issue should be resolved now. Do let me know if you’re still seeing it though.