fix(form): form element should emit her own odsChange event

Signed-off-by: Alexandre Esteves <[email protected]>

packages/ods/src/components/password/src/components/ods-password/ods-password.tsx

@@ -118,6 +118,7 @@ export class OdsPassword {
   }
 
   private async onOdsChange(event: OdsInputChangeEvent): Promise<void> {
+    event.stopPropagation();
     this.value = event.detail.value?.toString() ?? null;
     await updateInternals(this.internals, this.value, this.odsInput);
 
@@ -127,6 +128,13 @@ export class OdsPassword {
       this.isInvalid = !this.internals.validity.valid;
       this.shouldUpdateIsInvalidState = false;
     }
+
+    this.odsChange.emit({
+      name: this.name,
+      previousValue: event.detail.previousValue,
+      validity: this.internals.validity,
+      value: this.value,
+    });
   }
 
   private async onOdsInvalid(event: CustomEvent<boolean>): Promise<void> {

packages/ods/src/components/password/tests/validity/ods-password.e2e.ts

@@ -311,4 +311,28 @@ describe('ods-password validity', () => {
       });
     });
   });
+
+  describe('event', () => {
+    describe('odsChange', () => {
+      it('should have a valid validity change after odsChange', async() => {
+        let isValidityChecked: boolean | undefined = undefined;
+        await setup('<ods-password is-required></ods-password>');
+        await page.exposeFunction('onOdsChange', async() => {
+          isValidityChecked = await el.callMethod('getValidity');
+        });
+        await page.evaluate(() => {
+          const password = document.querySelector('ods-password');
+          // @ts-ignore function is exposed internally in the page
+          password?.addEventListener('odsChange', (e) => onOdsChange(e));
+        });
+
+        expect(await el.callMethod('checkValidity')).toBe(false);
+
+        await el.type('a');
+        await page.waitForChanges();
+
+        expect(isValidityChecked).toBe(true);
+      });
+    });
+  });
 });

packages/ods/src/components/phone-number/src/components/ods-phone-number/ods-phone-number.tsx

@@ -174,7 +174,7 @@ export class OdsPhoneNumber {
   }
 
   private async onOdsChange(event: OdsInputChangeEvent): Promise<void> {
-    event.stopImmediatePropagation();
+    event.stopPropagation();
 
     this.value = event.detail.value as string | null;
 

packages/ods/src/components/quantity/src/components/ods-quantity/ods-quantity.tsx

@@ -131,6 +131,8 @@ export class OdsQuantity {
   }
 
   private async onOdsChange(event: OdsInputChangeEvent): Promise<void> {
+    event.stopPropagation();
+
     if (event.detail.value === null || event.detail.value === '') {
       this.value = null;
     } else {
@@ -145,6 +147,13 @@ export class OdsQuantity {
       await this.odsInput?.checkValidity();
       this.isInvalid = !this.internals.validity.valid;
     }
+
+    this.odsChange.emit({
+      name: this.name,
+      previousValue: Number(event.detail.previousValue),
+      validity: this.internals.validity,
+      value: this.value,
+    });
   }
 
   private async onOdsInvalid(event: CustomEvent<boolean>): Promise<void> {

packages/ods/src/components/switch/src/components/ods-switch-item/ods-switch-item.tsx

@@ -91,9 +91,6 @@ export class OdsSwitchItem {
           case 'is-required':
             this.isRequired = this.el.getAttribute('is-required') === '';
             break;
-          case 'required':
-            this.odsInvalid.emit(!this.inputEl?.validity.valid);
-            break;
           default:
             break;
         }
@@ -106,11 +103,6 @@ export class OdsSwitchItem {
       attributeFilter: ['input-id', 'is-disabled', 'is-required'],
       attributes: true,
     });
-
-    this.inputEl && this.observer?.observe(this.inputEl, {
-      attributeFilter: ['required'],
-      attributes: true,
-    });
   }
 
   disconnectedCallback(): void {

packages/ods/src/components/timepicker/src/components/ods-timepicker/ods-timepicker.tsx

@@ -146,7 +146,6 @@ export class OdsTimepicker {
   }
 
   private async onOdsChange(event: OdsInputChangeEvent | OdsSelectChangeEvent, isFromSelect: boolean): Promise<void> {
-    event.preventDefault();
     event.stopPropagation();
 
     if (isFromSelect) {

packages/ods/src/components/toggle/tests/navigation/ods-toggle.e2e.ts

@@ -1,7 +1,7 @@
 import type { E2EElement, E2EPage } from '@stencil/core/testing';
 import { newE2EPage } from '@stencil/core/testing';
 
-describe('ods-input navigation', () => {
+describe('ods-toggle navigation', () => {
   let el: E2EElement;
   let page: E2EPage;