fix(input-otp): warn for incorrectly formatted separator strings

Author: brandyscarney

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

@@ -179,6 +179,18 @@ export class InputOTP implements ComponentInterface {
       return;
     }
 
+    if (typeof separators === 'string' && separators !== 'all') {
+      const isValidFormat = /^(\d+)(,\d+)*$/.test(separators);
+      if (!isValidFormat) {
+        printIonWarning(
+          `[ion-input-otp] - Invalid separators format. Expected a comma-separated list of numbers, an array of numbers, or "all". Received: ${separators}`,
+          this.el
+        );
+        this.parsedSeparators = [];
+        return;
+      }
+    }
+
     let separatorValues: number[];
     if (separators === 'all') {
       separatorValues = Array.from({ length: length - 1 }, (_, i) => i + 1);

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

@@ -48,14 +48,9 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  * Functionality is the same across modes and directions
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe.only(title('input-otp: separators functionality'), () => {
+  test.describe(title('input-otp: separators functionality'), () => {
     test('should render separators after the first and third input box', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input-otp separators="1,3">Description</ion-input-otp>
-      `,
-        config
-      );
+      await page.setContent(`<ion-input-otp separators="1,3">Description</ion-input-otp>`, config);
 
       const firstSeparator = page.locator('ion-input-otp .native-wrapper:nth-child(1) .input-otp-separator');
       await expect(firstSeparator).toHaveCount(1);
@@ -68,12 +63,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
 
     test('should render separators after the second and third input box', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input-otp>Description</ion-input-otp>
-      `,
-        config
-      );
+      await page.setContent(`<ion-input-otp>Description</ion-input-otp>`, config);
 
       const inputOtp = page.locator('ion-input-otp');
       await inputOtp.evaluate((el: HTMLIonInputOtpElement) => {
@@ -91,12 +81,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
 
     test('should render all separators', async ({ page }) => {
-      await page.setContent(
-        `
-        <ion-input-otp separators="all">Description</ion-input-otp>
-      `,
-        config
-      );
+      await page.setContent(`<ion-input-otp separators="all">Description</ion-input-otp>`, config);
 
       const firstSeparator = page.locator('ion-input-otp .native-wrapper:nth-child(1) .input-otp-separator');
       await expect(firstSeparator).toHaveCount(1);
@@ -117,17 +102,50 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         }
       });
 
-      await page.setContent(
-        `
-        <ion-input-otp separators="1,3,5,6,7">Description</ion-input-otp>
-      `,
-        config
-      );
+      await page.setContent(`<ion-input-otp separators="1,3,5,6,7">Description</ion-input-otp>`, config);
 
       expect(warnings.length).toBe(1);
       expect(warnings[0]).toContain(
         '[Ionic Warning]: [ion-input-otp] - The following separator positions are greater than the input length (4): 5, 6, 7. These separators will be ignored.'
       );
     });
+
+    test('should warn when setting separators to an invalid space-separated string', async ({ page }) => {
+      const warnings: string[] = [];
+
+      page.on('console', (ev) => {
+        if (ev.type() === 'warning') {
+          warnings.push(ev.text());
+        }
+      });
+
+      const invalidSeparators = '1 2 3';
+
+      await page.setContent(`<ion-input-otp separators="${invalidSeparators}">Description</ion-input-otp>`, config);
+
+      expect(warnings.length).toBe(1);
+      expect(warnings[0]).toContain(
+        `[Ionic Warning]: [ion-input-otp] - Invalid separators format. Expected a comma-separated list of numbers, an array of numbers, or "all". Received: ${invalidSeparators}`
+      );
+    });
+
+    test('should warn when setting separators to an invalid comma-separated string', async ({ page }) => {
+      const warnings: string[] = [];
+
+      page.on('console', (ev) => {
+        if (ev.type() === 'warning') {
+          warnings.push(ev.text());
+        }
+      });
+
+      const invalidSeparators = '1,d,3';
+
+      await page.setContent(`<ion-input-otp separators="${invalidSeparators}">Description</ion-input-otp>`, config);
+
+      expect(warnings.length).toBe(1);
+      expect(warnings[0]).toContain(
+        `[Ionic Warning]: [ion-input-otp] - Invalid separators format. Expected a comma-separated list of numbers, an array of numbers, or "all". Received: ${invalidSeparators}`
+      );
+    });
   });
 });