I’m encountering an issue with an input field in my React application built with Next.js. Specifically, when using an iPad device, the input field behaves inconsistently with commas.

On desktop browsers, I can enter a comma after typing a number (e.g., “2,” becomes “2,”), but on iPad, the input field gets reset to 0 after typing a comma followed by a number (e.g., “4,” stays as “0”).

The code behaves as expected on desktop.

  const [customItemName, setCustomItemName] = useState("");
  const [customItemPrice, setCustomItemPrice] = useState<number>(0);

<input
              type="number"
              inputMode="decimal"
              className="border p-2 rounded w-full"
              value={customItemPrice === 0 ? "" : customItemPrice.toString()}
              placeholder="0"
              onChange={(e) => setCustomItemPrice(parseFloat(e.target.value))}
            />