test(frameworks): input-otp doesn't support required

Author: brandyscarney

packages/react/test/base/src/pages/Inputs.tsx

@@ -68,24 +68,14 @@ const Inputs: React.FC<InputsProps> = () => {
 
   const [touched, setTouched] = useState({
     input: false,
-    inputOtp: false,
     textarea: false,
   });
 
   const getValidationClasses = (fieldName: keyof typeof touched, value: string | number | null | undefined) => {
     const isTouched = touched[fieldName];
-    let isValid = false;
 
-    // Handle ion-input-otp which has multiple inputs
-    if (fieldName === 'inputOtp') {
-      // input-otp needs to check if all inputs are filled
-      // (value length equals component length)
-      const valueStr = String(value || '');
-      isValid = valueStr.length === 4;
-    } else {
-      const isEmpty = value === '' || value === null || value === undefined;
-      isValid = !isEmpty;
-    }
+    const isEmpty = value === '' || value === null || value === undefined;
+    const isValid = !isEmpty;
 
     // Always return validation classes
     // ion-touched is only added on blur
@@ -115,7 +105,6 @@ const Inputs: React.FC<InputsProps> = () => {
     setSelect('apples');
     setTouched({
       input: false,
-      inputOtp: false,
       textarea: false,
     });
   };
@@ -207,9 +196,6 @@ const Inputs: React.FC<InputsProps> = () => {
             <IonInputOtp
               value={inputOtp}
               onIonInput={(e: IonInputOtpCustomEvent<InputOtpInputEventDetail>) => setInputOtp(e.detail.value ?? '')}
-              onIonBlur={() => setTouched(prev => ({ ...prev, inputOtp: true }))}
-              className={getValidationClasses('inputOtp', inputOtp)}
-              required
             ></IonInputOtp>
           </IonItem>
 

packages/react/test/base/tests/e2e/specs/components/inputs.cy.ts

@@ -80,15 +80,6 @@ describe('Inputs', () => {
 
       cy.get('ion-textarea').shadow().find('textarea').focus().blur();
       cy.get('ion-textarea').should('have.class', 'ion-invalid');
-
-      cy.get('ion-input-otp input').first().focus().blur();
-      cy.get('ion-input-otp').should('have.class', 'ion-invalid');
-    });
-
-    it('should show invalid state for required input-otp when partially filled', () => {
-      cy.get('ion-input-otp input').first().focus().blur();
-      cy.get('ion-input-otp input').eq(0).type('12', { scrollBehavior: false });
-      cy.get('ion-input-otp').should('have.class', 'ion-invalid');
     });
 
     it('should show valid state for required inputs when filled', () => {
@@ -97,9 +88,6 @@ describe('Inputs', () => {
 
       cy.get('ion-textarea').shadow().find('textarea').type('Test value', { scrollBehavior: false });
       cy.get('ion-textarea').should('have.class', 'ion-valid');
-
-      cy.get('ion-input-otp input').eq(0).type('1234', { scrollBehavior: false });
-      cy.get('ion-input-otp').should('have.class', 'ion-valid');
     });
   });
 })

packages/vue/test/base/src/views/Inputs.vue

@@ -42,7 +42,7 @@
       </ion-item>
 
       <ion-item>
-        <ion-input-otp v-model="inputOtp" required @ionBlur="handleValidation" @ionInput="handleValidation"></ion-input-otp>
+        <ion-input-otp v-model="inputOtp"></ion-input-otp>
       </ion-item>
 
       <ion-item>
@@ -181,16 +181,8 @@ const setIonicClasses = (element: HTMLElement, isBlurEvent: boolean) => {
   requestAnimationFrame(() => {
     let isValid = false;
 
-    // Handle ion-input-otp which has multiple inputs
-    if (element.tagName === 'ION-INPUT-OTP') {
-      const ionInputOtp = element as any;
-      const value = ionInputOtp.value || '';
-      const length = ionInputOtp.length || 4;
-      // input-otp needs to check if all inputs are filled
-      // (value length equals component length)
-      isValid = value.length === length;
     // Handle ion-textarea which uses shadow DOM
-    } else if (element.tagName === 'ION-TEXTAREA') {
+    if (element.tagName === 'ION-TEXTAREA') {
       const nativeTextarea = element.shadowRoot?.querySelector('textarea') as HTMLTextAreaElement | null;
       if (nativeTextarea) {
         isValid = nativeTextarea.checkValidity();

packages/vue/test/base/tests/e2e/specs/inputs.cy.js

@@ -77,15 +77,6 @@ describe('Inputs', () => {
       cy.get('ion-textarea').shadow().find('textarea').focus();
       cy.get('ion-textarea').blur();
       cy.get('ion-textarea').should('have.class', 'ion-invalid');
-
-      cy.get('ion-input-otp input').first().focus().blur();
-      cy.get('ion-input-otp').should('have.class', 'ion-invalid');
-    });
-
-    it('should show invalid state for required input-otp when partially filled', () => {
-      cy.get('ion-input-otp input').first().focus().blur();
-      cy.get('ion-input-otp input').eq(0).type('12', { scrollBehavior: false });
-      cy.get('ion-input-otp').should('have.class', 'ion-invalid');
     });
 
     it('should show valid state for required inputs when filled', () => {
@@ -94,9 +85,6 @@ describe('Inputs', () => {
 
       cy.get('ion-textarea').shadow().find('textarea').type('Test value', { scrollBehavior: false });
       cy.get('ion-textarea').should('have.class', 'ion-valid');
-
-      cy.get('ion-input-otp input').eq(0).type('1234', { scrollBehavior: false });
-      cy.get('ion-input-otp').should('have.class', 'ion-valid');
     });
   });
 })