fix(number-input): Turn off formatting for Android and iOS devices

src/core/utils/device/deviceUtils.ts

@@ -0,0 +1,8 @@
+function isMobileDevice() {
+  const userAgent = navigator.userAgent || navigator.vendor;
+  const devices = [/Android/i, /iPhone/i, /iPad/i];
+
+  return devices.some((device) => userAgent.match(device));
+}
+
+export {isMobileDevice};

src/core/utils/number/numberUtils.ts

@@ -36,21 +36,17 @@ function formatNumber(formatNumberOptions: FormatNumberOptions) {
 }
 
 /**
- * Coerces a number scientific notation. {@link https://observablehq.com/@mbostock/localized-number-parsing | Reference}
+ * Coerces a number to scientific notation. {@link https://observablehq.com/@mbostock/localized-number-parsing | Reference}
  * @param {object} options - An object includes parse number options
  * @param {string} options.locale - Default locale used is browser locale
  * @param {number} options.maximumFractionDigits - The maximum digit a decimal can have
  * @param {number} value - A number to convert to string
  * @returns {string} The value after coercing the given value to a scientific notation.
  */
-function parseNumber(
-  options: ParseNumberOptions = {locale: navigator.language, maximumFractionDigits: 0},
-  value: string
-) {
-  const {THOUSANDTHS_SEPARATOR, DECIMAL_NUMBER_SEPARATOR} = getNumberSeparators(
-    options.locale
-  );
-  const numerals = getLocaleNumerals(options.locale);
+function parseNumber(options: ParseNumberOptions, value: string) {
+  const {locale = navigator.language, maximumFractionDigits = 0} = options;
+  const {THOUSANDTHS_SEPARATOR, DECIMAL_NUMBER_SEPARATOR} = getNumberSeparators(locale);
+  const numerals = getLocaleNumerals(locale);
   const numeral = new RegExp(`[${numerals.join("")}]`, "g");
   const digitMapper = getDigit(new Map(numerals.map((d, i) => [d, i])));
   let parsedNumber = value
@@ -59,12 +55,12 @@ function parseNumber(
     .replace(new RegExp(`[${DECIMAL_NUMBER_SEPARATOR}]`), ".")
     .replace(numeral, digitMapper);
 
-  if (typeof options.maximumFractionDigits === "number") {
+  if (typeof maximumFractionDigits === "number") {
     const [integerPart, decimalPart] = parsedNumber.split(".");
 
-    if (options.maximumFractionDigits === 0) {
+    if (maximumFractionDigits === 0) {
       parsedNumber = integerPart;
-    } else if (decimalPart && decimalPart.length === options.maximumFractionDigits + 1) {
+    } else if (decimalPart && decimalPart.length === maximumFractionDigits + 1) {
       return parsedNumber.slice(0, parsedNumber.length - 1);
     }
   } else {
@@ -86,10 +82,7 @@ function mapDigitsToLocalVersion(
   {locale = navigator.language}: {locale?: string},
   digits: string
 ) {
-  return digits
-    .split("")
-    .map(mapDigitToLocalVersion({locale}))
-    .join("");
+  return digits.split("").map(mapDigitToLocalVersion({locale})).join("");
 }
 
 function mapDigitToLocalVersion({locale = navigator.language}: {locale?: string}) {

src/form/input/Input.tsx

@@ -12,50 +12,8 @@ import {
   getNegativeZero,
   getThousandthSeparatorCount
 } from "../../core/utils/number/numberUtils";
-
-export type InputTypes =
-  | "checkbox"
-  | "button"
-  | "color"
-  | "date"
-  | "datetime-local"
-  | "email"
-  | "file"
-  | "hidden"
-  | "image"
-  | "month"
-  | "number"
-  | "password"
-  | "radio"
-  | "range"
-  | "reset"
-  | "search"
-  | "submit"
-  | "tel"
-  | "text"
-  | "time"
-  | "url"
-  | "week";
-
-export type InputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  "disabled" | "name" | "className"
-> & {
-  name: string;
-  type?: InputTypes;
-  testid?: string;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  isDisabled?: boolean;
-  hasError?: boolean;
-  customClassName?: string;
-  onChange: React.ReactEventHandler<HTMLInputElement>;
-  localizationOptions?: {
-    shouldFormatToLocaleString?: boolean;
-    locale?: string;
-    maximumFractionDigits?: number;
-  };
-};
+import {getInputLocalizationOptions, getInputParseNumberOptions} from "./util/inputUtils";
+import {InputProps} from "./util/inputTypes";
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   /* eslint-disable complexity */
@@ -80,7 +38,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       shouldFormatToLocaleString = false,
       locale,
       maximumFractionDigits = 0
-    } = localizationOptions;
+    } = getInputLocalizationOptions(localizationOptions);
     const [
       {
         DECIMAL_NUMBER_SEPARATOR: decimalSeparatorForLocale,
@@ -181,7 +139,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 
         if (newValue) {
           const formattedNewValue = parseNumber(
-            {locale, maximumFractionDigits},
+            getInputParseNumberOptions({locale, maximumFractionDigits}),
             newValue
           );
           // Number("-") returns NaN. Should allow minus sign as first character.

src/form/input/input.test.tsx

@@ -3,7 +3,8 @@ import {render, screen} from "@testing-library/react";
 import "@testing-library/jest-dom";
 import userEvent from "@testing-library/user-event";
 
-import Input, {InputProps} from "./Input";
+import Input from "./Input";
+import {InputProps} from "./util/inputTypes";
 import {testA11y} from "../../core/utils/test/testUtils";
 
 describe("<Input />", () => {

src/form/input/typeahead/TypeaheadInput.tsx

@@ -1,7 +1,8 @@
 import React, {useEffect} from "react";
 import classNames from "classnames";
 
-import Input, {InputProps, InputTypes} from "../Input";
+import Input from "../Input";
+import {InputProps, InputTypes} from "../util/inputTypes";
 import useDebounce from "../../../core/utils/hooks/useDebounce";
 
 export type TypeaheadInputProps = Omit<InputProps, "onChange" | "type"> & {

src/form/input/util/inputTypes.ts

@@ -0,0 +1,45 @@
+export type InputTypes =
+  | "checkbox"
+  | "button"
+  | "color"
+  | "date"
+  | "datetime-local"
+  | "email"
+  | "file"
+  | "hidden"
+  | "image"
+  | "month"
+  | "number"
+  | "password"
+  | "radio"
+  | "range"
+  | "reset"
+  | "search"
+  | "submit"
+  | "tel"
+  | "text"
+  | "time"
+  | "url"
+  | "week";
+
+export type InputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "disabled" | "name" | "className"
+> & {
+  name: string;
+  type?: InputTypes;
+  testid?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  isDisabled?: boolean;
+  hasError?: boolean;
+  customClassName?: string;
+  onChange: React.ReactEventHandler<HTMLInputElement>;
+  localizationOptions?: InputLocalizationOptions;
+};
+
+export type InputLocalizationOptions = {
+  shouldFormatToLocaleString?: boolean;
+  locale?: string;
+  maximumFractionDigits?: number;
+};

src/form/input/util/inputUtils.ts

@@ -0,0 +1,26 @@
+import {isMobileDevice} from "../../../core/utils/device/deviceUtils";
+import {ParseNumberOptions} from "../../../core/utils/number/numberTypes";
+import {InputLocalizationOptions} from "./inputTypes";
+
+function getInputLocalizationOptions(
+  localizationOptions: InputLocalizationOptions
+): InputLocalizationOptions {
+  return isMobileDevice()
+    ? {
+        shouldFormatToLocaleString: false,
+        locale: undefined,
+        maximumFractionDigits: localizationOptions.maximumFractionDigits
+      }
+    : localizationOptions;
+}
+
+function getInputParseNumberOptions(options: ParseNumberOptions): ParseNumberOptions {
+  return isMobileDevice()
+    ? {
+        ...options,
+        locale: "en-US"
+      }
+    : options;
+}
+
+export {getInputLocalizationOptions, getInputParseNumberOptions};

src/form/password-input/PasswordInput.tsx

@@ -3,7 +3,8 @@ import "./_password-input.scss";
 import React, {useState} from "react";
 import classNames from "classnames";
 
-import Input, {InputProps} from "../input/Input";
+import Input from "../input/Input";
+import {InputProps} from "../input/util/inputTypes";
 import Button from "../../button/Button";
 
 export interface PasswordInputProps extends Omit<InputProps, "leftIcon" | "rightIcon"> {

src/index.ts

@@ -4,7 +4,8 @@ import "./ui/reference/_measurement.scss";
 import FormField, {
   FormFieldProps as FormFieldComponentProps
 } from "./form/field/FormField";
-import Input, {InputProps as InputComponentProps} from "./form/input/Input";
+import Input from "./form/input/Input";
+import {InputProps as InputComponentProps} from "./form/input/util/inputTypes";
 import PasswordInput, {
   PasswordInputProps as PasswordInputComponentProps
 } from "./form/password-input/PasswordInput";