fix(input-otp): remove reset method, update tabindexes and aria when the value changes

Author: brandyscarney

core/api.txt

@@ -794,7 +794,6 @@ ion-input-otp,prop,shape,"rectangular" | "round" | "soft",'round',false,false
 ion-input-otp,prop,size,"large" | "medium" | "small",'medium',false,false
 ion-input-otp,prop,type,"number" | "text",'number',false,false
 ion-input-otp,prop,value,null | number | string | undefined,'',false,false
-ion-input-otp,method,reset,reset() => Promise<void>
 ion-input-otp,method,setFocus,setFocus(index?: number) => Promise<void>
 ion-input-otp,event,ionBlur,FocusEvent,true
 ion-input-otp,event,ionChange,InputOtpChangeEventDetail,true

core/src/components.d.ts

@@ -1354,10 +1354,6 @@ export namespace Components {
           * If `true`, the user cannot modify the value.
          */
         "readonly": boolean;
-        /**
-          * Resets the value and focus state.
-         */
-        "reset": () => Promise<void>;
         /**
           * Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers.  For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box.
          */

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

@@ -174,23 +174,6 @@ export class InputOTP implements ComponentInterface {
    */
   @Event() ionFocus!: EventEmitter<FocusEvent>;
 
-  /**
-   * Resets the value and focus state.
-   */
-  @Method()
-  async reset() {
-    this.value = '';
-
-    this.focusedValue = null;
-    this.hasFocus = false;
-
-    this.inputRefs.forEach((input) => {
-      input.blur();
-    });
-
-    this.updateTabIndexes();
-  }
-
   /**
    * Sets focus to an input box.
    * @param index - The index of the input box to focus (0-based).
@@ -211,6 +194,7 @@ export class InputOTP implements ComponentInterface {
   @Watch('value')
   valueChanged() {
     this.initializeValues();
+    this.updateTabIndexes();
   }
 
   /**
@@ -367,7 +351,6 @@ export class InputOTP implements ComponentInterface {
     if (newValue.length === length) {
       this.ionComplete.emit({ value: newValue });
     }
-    this.updateTabIndexes();
   }
 
   /**

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

@@ -77,6 +77,24 @@ configs().forEach(({ title, config }) => {
       await expect(inputBoxes.nth(3)).toHaveAttribute('aria-hidden', 'true');
     });
 
+    test('should update aria-hidden when value is set after initialization', async ({ page }) => {
+      await page.setContent(`<ion-input-otp></ion-input-otp>`, config);
+
+      await page.evaluate(() => {
+        const inputOtp = document.querySelector('ion-input-otp');
+        if (inputOtp) {
+          inputOtp.value = '12';
+        }
+      });
+
+      const inputBoxes = page.locator('ion-input-otp input');
+
+      await expect(inputBoxes.nth(0)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(1)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(2)).toHaveAttribute('aria-hidden', 'false');
+      await expect(inputBoxes.nth(3)).toHaveAttribute('aria-hidden', 'true');
+    });
+
     test('should update aria-label and aria-labelledby when set on host', async ({ page }) => {
       await page.setContent(
         `<ion-input-otp aria-label="Custom label" aria-labelledby="my-label"></ion-input-otp>`,

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

@@ -944,28 +944,4 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await expect(lastInput).toBeFocused();
     });
   });
-
-  test.describe(title('input-otp: reset method'), () => {
-    test('should clear all input values and reset focus state', async ({ page }) => {
-      await page.setContent(`<ion-input-otp value="1234">Description</ion-input-otp>`, config);
-
-      const inputOtp = page.locator('ion-input-otp');
-      const inputBoxes = page.locator('ion-input-otp input');
-
-      // Focus an input first
-      await inputBoxes.nth(2).focus();
-      await expect(inputBoxes.nth(2)).toBeFocused();
-
-      // Call reset
-      await inputOtp.evaluate((el: HTMLIonInputOtpElement) => {
-        el.reset();
-      });
-
-      // Check that values are cleared
-      await verifyInputValues(inputOtp, ['', '', '', '']);
-
-      // Check that focus is removed
-      await expect(inputBoxes.nth(2)).not.toBeFocused();
-    });
-  });
 });

packages/angular/src/directives/proxies.ts

@@ -1019,7 +1019,7 @@ This event will not emit when programmatically setting the `value` property.
 
 @ProxyCmp({
   inputs: ['autocapitalize', 'color', 'disabled', 'fill', 'inputmode', 'length', 'pattern', 'readonly', 'separators', 'shape', 'size', 'type', 'value'],
-  methods: ['reset', 'setFocus']
+  methods: ['setFocus']
 })
 @Component({
   selector: 'ion-input-otp',

packages/angular/standalone/src/directives/input-otp.ts

@@ -54,7 +54,7 @@ const accessorProvider = {
 @ProxyCmp({
   defineCustomElementFn: defineCustomElement,
   inputs: INPUT_OTP_INPUTS,
-  methods: ['reset', 'setFocus'],
+  methods: ['setFocus'],
 })
 @Component({
   selector: 'ion-input-otp',