feat(checkbox): update validity state on isRequired change

ovh · Nov 28, 2024 · f787a42 · f787a42
1 parent 55d1d0c
commit f787a42
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 20 deletions.
diff --git a/packages/examples/react-webpack/src/app/components/formNative/FormNative.tsx b/packages/examples/react-webpack/src/app/components/formNative/FormNative.tsx
@@ -55,25 +55,24 @@ function FormNative(): ReactElement {
         - All fields have default value: {withDefaultValue.toString()}
       </p>
 
-      {/*<div>*/}
-      {/*  /!* OKish no validity method but required is managed by browser directly *!/*/}
-      {/*  <OdsCheckbox*/}
-      {/*    // isRequired={ true }*/}
-      {/*    inputId="checkbox"*/}
-      {/*    name="checkbox"*/}
-      {/*    value="checkbox"*/}
-      {/*    ref={ checkboxRef }*/}
-      {/*  />*/}
-      {/*  <label htmlFor="checkbox">Checked</label>*/}
-
-      {/*  <OdsCheckbox*/}
-      {/*    // isRequired={ true }*/}
-      {/*    inputId="checkbox2"*/}
-      {/*    name="checkbox"*/}
-      {/*    value="checkbox2"*/}
-      {/*  />*/}
-      {/*  <label htmlFor="checkbox2">Checked 2</label>*/}
-      {/*</div>*/}
+      <div>
+        {/* OKish no validity method but required is managed by browser directly */}
+        <OdsCheckbox
+          isRequired={ areAllRequired }
+          inputId="checkbox"
+          name="checkbox"
+          value="checkbox"
+        />
+        <label htmlFor="checkbox">Checked</label>
+
+        <OdsCheckbox
+          isRequired={ areAllRequired }
+          inputId="checkbox2"
+          name="checkbox"
+          value="checkbox2"
+        />
+        <label htmlFor="checkbox2">Checked 2</label>
+      </div>
 
       {/*/!* KO? reset to "" instead of null *!/*/}
       {/*<OdsDatepicker*/}

diff --git a/packages/ods/src/components/checkbox/src/components/ods-checkbox/ods-checkbox.tsx b/packages/ods/src/components/checkbox/src/components/ods-checkbox/ods-checkbox.tsx
@@ -10,6 +10,7 @@ import { type OdsCheckboxChangeEventDetail } from '../../interfaces/event';
 })
 export class OdsCheckbox {
   private inputEl?: HTMLInputElement;
+  private observer?: MutationObserver;
 
   @State() private isInvalid: boolean = false;
 
@@ -85,6 +86,29 @@ export class OdsCheckbox {
     return this.inputEl?.willValidate;
   }
 
+  componentWillLoad(): void {
+    this.observer = new MutationObserver((mutations: MutationRecord[]) => {
+      for (const mutation of mutations) {
+        if (mutation.attributeName === 'required') {
+          this.isInvalid = !this.inputEl?.validity.valid;
+        }
+      }
+    });
+  }
+
+  componentDidLoad(): void {
+    if (this.inputEl) {
+      this.observer?.observe(this.inputEl, {
+        attributeFilter: ['required'],
+        attributeOldValue: false,
+      });
+    }
+  }
+
+  disconnectedCallback(): void {
+    this.observer?.disconnect();
+  }
+
   async formResetCallback(): Promise<void> {
     await this.reset();
   }
@@ -118,7 +142,8 @@ export class OdsCheckbox {
 
   render(): FunctionalComponent {
     return (
-      <Host class="ods-checkbox"
+      <Host
+        class="ods-checkbox"
         disabled={ this.isDisabled }>
         <input
           aria-label={ this.ariaLabel }

diff --git a/packages/ods/src/components/checkbox/tests/validity/ods-checkbox.e2e.ts b/packages/ods/src/components/checkbox/tests/validity/ods-checkbox.e2e.ts
@@ -220,4 +220,24 @@ describe('ods-checkbox validity', () => {
       expect(formValidity).toBe(true);
     });
   });
+
+  describe('watchers', () => {
+    describe('is-required', () => {
+      it('should update validity when is-required change', async() => {
+        await setup('<ods-checkbox is-required></ods-checkbox>');
+
+        expect(await el.callMethod('checkValidity')).toBe(false);
+
+        await el.removeAttribute('is-required');
+        await page.waitForChanges();
+
+        expect(await el.callMethod('checkValidity')).toBe(true);
+
+        await el.setAttribute('is-required', 'true');
+        await page.waitForChanges();
+
+        expect(await el.callMethod('checkValidity')).toBe(false);
+      });
+    });
+  });
 });