fix(input-otp): allow any kind of numeric character in any script for number type

Author: brandyscarney

core/src/components.d.ts

@@ -1347,7 +1347,7 @@ export namespace Components {
          */
         "length": number;
         /**
-          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[0-9]" For text (type="text"): "[\\p{L}\\p{N}]"
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[\\p{N}]" For text (type="text"): "[\\p{L}\\p{N}]"
          */
         "pattern"?: string;
         /**
@@ -6315,7 +6315,7 @@ declare namespace LocalJSX {
          */
         "onIonInput"?: (event: IonInputOtpCustomEvent<InputOtpInputEventDetail>) => void;
         /**
-          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[0-9]" For text (type="text"): "[\\p{L}\\p{N}]"
+          * A regex pattern string for allowed characters. Defaults based on type.  For numbers (type="number"): "[\\p{N}]" For text (type="text"): "[\\p{L}\\p{N}]"
          */
         "pattern"?: string;
         /**

core/src/components/input-otp/input-otp.tsx

@@ -88,7 +88,7 @@ export class InputOTP implements ComponentInterface {
   /**
    * A regex pattern string for allowed characters. Defaults based on type.
    *
-   * For numbers (type="number"): "[0-9]"
+   * For numbers (type="number"): "[\\p{N}]"
    * For text (type="text"): "[\\p{L}\\p{N}]"
    */
   @Prop() pattern?: string;
@@ -318,7 +318,7 @@ export class InputOTP implements ComponentInterface {
     if (pattern) {
       return pattern;
     }
-    return type === 'number' ? '[0-9]' : '[\\p{L}\\p{N}]';
+    return type === 'number' ? '[\\p{N}]' : '[\\p{L}\\p{N}]';
   }
 
   /**

core/src/components/input-otp/test/basic/input-otp.e2e.ts

@@ -74,6 +74,33 @@ configs({ modes: ['ios'] }).forEach(({ title, config }) => {
       await verifyInputValues(inputOtp, ['2', '4', '6', '8']);
     });
 
+    test('should accept Eastern Arabic numerals by default', async ({ page }) => {
+      await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
+
+      const inputOtp = page.locator('ion-input-otp');
+      const firstInput = page.locator('ion-input-otp input').first();
+      await firstInput.focus();
+
+      await page.keyboard.type('١٢٣٤');
+
+      // There is an issue with Playwright automatically flipping the
+      // values, so we check for the flipped values from above, even though
+      // it is entered correctly in the component.
+      await verifyInputValues(inputOtp, ['١', '٢', '٣', '٤']);
+    });
+
+    test('should accept only Western Arabic numerals when pattern is set to [0-9]', async ({ page }) => {
+      await page.setContent(`<ion-input-otp pattern="[0-9]">Description</ion-input-otp>`, config);
+
+      const inputOtp = page.locator('ion-input-otp');
+      const firstInput = page.locator('ion-input-otp input').first();
+      await firstInput.focus();
+
+      await page.keyboard.type('12٣٤34');
+
+      await verifyInputValues(inputOtp, ['1', '2', '3', '4']);
+    });
+
     test('should accept Latin characters when type is text', async ({ page }) => {
       await page.setContent(`<ion-input-otp type="text">Description</ion-input-otp>`, config);