fix(input-otp): respect case when checking pattern

Author: brandyscarney

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

@@ -127,7 +127,7 @@ export class InputOTP implements ComponentInterface {
     if (this.value != null && String(this.value).length > 0) {
       const chars = String(this.value).split('').slice(0, this.length);
       chars.forEach((char, index) => {
-        if (this.validKeys.test(char.toLowerCase())) {
+        if (this.validKeys.test(char)) {
           this.inputValues[index] = char;
         }
       });
@@ -137,20 +137,23 @@ export class InputOTP implements ComponentInterface {
   }
 
   /**
-   * Get the default allowed keys based on type if not explicitly set
+   * Get the regex pattern for allowed characters
+   * If a pattern is provided, use it to create a regex pattern
+   * Otherwise, use the default regex pattern based on type
    */
   private get validKeys(): RegExp {
     const { pattern, type } = this;
 
     if (pattern) {
-      // Create a regex that matches a single character from the provided pattern
-      return new RegExp(`^${pattern}$`, 'i');
+      return new RegExp(`^${pattern}$`);
     }
     return type === 'number' ? /^[0-9]$/ : /^[a-zA-Z0-9]$/i;
   }
 
   /**
-   * Get the default value for inputmode based on type if not explicitly set
+   * Get the default value for inputmode
+   * If inputmode is provided, use it
+   * Otherwise, use the default inputmode based on type
    */
   private getInputmode(): string {
     const { inputmode } = this;
@@ -183,7 +186,7 @@ export class InputOTP implements ComponentInterface {
     const { validKeys } = this;
 
     // Only allow input if it's a single character and matches the pattern
-    if (value.length > 1 || (value.length > 0 && !validKeys.test(value.toLowerCase()))) {
+    if (value.length > 1 || (value.length > 0 && !validKeys.test(value))) {
       // Reset the input value if not valid
       this.inputRefs[index].value = '';
       this.inputValues[index] = '';
@@ -287,7 +290,7 @@ export class InputOTP implements ComponentInterface {
 
     const validChars = pastedText
       .split('')
-      .filter((char) => validKeys.test(char.toLowerCase()))
+      .filter((char) => validKeys.test(char))
       .slice(0, length);
 
     // Find the first empty input

core/src/components/input-otp/test/basic/index.html

@@ -49,9 +49,10 @@ <h2>Default</h2>
 
           <div class="grid-item">
             <h2>Types</h2>
-            <ion-input-otp id="numberType"> Numbers only <span id="value"></span> </ion-input-otp>
-            <ion-input-otp id="letterAndNumberType" type="text"> Letters and numbers <span id="value"></span> </ion-input-otp>
-            <ion-input-otp id="customType" type="text" pattern="[a-fA-F]"> Custom Pattern: a-f and A-F <span id="value"></span> </ion-input-otp>
+            <ion-input-otp class="input-otp-type"> Numbers only <span id="value"></span> </ion-input-otp>
+            <ion-input-otp class="input-otp-type" type="text"> Letters and numbers <span id="value"></span> </ion-input-otp>
+            <ion-input-otp class="input-otp-type" type="text" pattern="[a-fA-F]"> Custom Pattern: a-f and A-F <span id="value"></span> </ion-input-otp>
+            <ion-input-otp class="input-otp-type" type="text" pattern="[D-L]"> Custom Pattern: D-L <span id="value"></span> </ion-input-otp>
           </div>
 
           <div class="grid-item">
@@ -76,16 +77,15 @@ <h2>Invalid</h2>
         const numberValue = document.getElementById('numberValue');
         numberValue.value = 123;
 
+        const inputOtpTypes = document.querySelectorAll('.input-otp-type');
+
         // Display value under the different input types on ionChange
-        function addValueListener(id) {
-          const el = document.getElementById(id);
-          el.addEventListener('ionChange', (event) => {
+        inputOtpTypes.forEach((inputOtpType) => {
+          inputOtpType.addEventListener('ionChange', (event) => {
             const displayValue = event.detail.value != '' ? `(value: ${event.detail.value})` : '';
-            el.querySelector('#value').textContent = displayValue;
+            inputOtpType.querySelector('#value').textContent = displayValue;
           });
-        }
-
-        ['numberType', 'letterAndNumberType', 'customType'].forEach(addValueListener);
+        });
       </script>
     </ion-app>
   </body>

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

@@ -88,7 +88,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(inputBoxes.nth(3)).toHaveValue('5');
     });
 
-    test('should accept custom pattern when pattern is set', async ({ page }) => {
+    test('should accept custom pattern of lowercase and uppercase letters when pattern is set', async ({ page }) => {
       await page.setContent(
         `
         <ion-input-otp type="text" pattern="[a-fA-F]">Description</ion-input-otp>
@@ -99,14 +99,34 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const firstInput = page.locator('ion-input-otp input').first();
       await firstInput.focus();
 
-      await page.keyboard.type('AGBZFD');
+      await page.keyboard.type('aGBZfD');
 
       const inputBoxes = page.locator('ion-input-otp input');
-      await expect(inputBoxes.nth(0)).toHaveValue('A');
+      await expect(inputBoxes.nth(0)).toHaveValue('a');
       await expect(inputBoxes.nth(1)).toHaveValue('B');
-      await expect(inputBoxes.nth(2)).toHaveValue('F');
+      await expect(inputBoxes.nth(2)).toHaveValue('f');
       await expect(inputBoxes.nth(3)).toHaveValue('D');
     });
+
+    test('should accept custom pattern of uppercase letters only when pattern is set', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-input-otp type="text" pattern="[D-L]">Description</ion-input-otp>
+      `,
+        config
+      );
+
+      const firstInput = page.locator('ion-input-otp input').first();
+      await firstInput.focus();
+
+      await page.keyboard.type('abcdABCDEFG');
+
+      const inputBoxes = page.locator('ion-input-otp input');
+      await expect(inputBoxes.nth(0)).toHaveValue('D');
+      await expect(inputBoxes.nth(1)).toHaveValue('E');
+      await expect(inputBoxes.nth(2)).toHaveValue('F');
+      await expect(inputBoxes.nth(3)).toHaveValue('G');
+    });
   });
 
   test.describe(title('input-otp: input functionality'), () => {