fix(checkbox): reset checkbox & radio

ovh · Jul 29, 2024 · e8f5047 · e8f5047
1 parent f2cc3a8
commit e8f5047
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 29 deletions.
diff --git a/packages/examples/react-webpack/src/app/App.tsx b/packages/examples/react-webpack/src/app/App.tsx
@@ -1,15 +1,15 @@
 import React, { type ReactElement } from 'react';
 // import { Gallery } from './components/gallery/Gallery';
-// import { FormFormik } from './components/formFormik/FormFormik';
+import { FormFormik } from './components/formFormik/FormFormik';
 import styles from './app.scss';
-import { FormNative } from './components/formNative/FormNative';
+// import { FormNative } from './components/formNative/FormNative';
 
 function App(): ReactElement {
   return (
     <div className={ styles.app }>
       {/* <Gallery /> */}
-      {/*<FormFormik />*/}
-      <FormNative />
+      <FormFormik />
+      {/* <FormNative /> */}
     </div>
   );
 }

diff --git a/packages/examples/react-webpack/src/app/components/formFormik/FormFormik.tsx b/packages/examples/react-webpack/src/app/components/formFormik/FormFormik.tsx
@@ -9,15 +9,15 @@ const validationSchema = yup.object({
   checkbox: yup.string().nullable(),//.required(),
   datepicker: yup.date().nullable(),//.required(),
   inputNumber: yup.number().nullable(),//.required(),
-  inputText: yup.string().nullable().required(),
-  password: yup.string().nullable().required(),
-  phoneNumber: yup.string().nullable().required(),
+  inputText: yup.string().nullable(),//.required(),
+  password: yup.string().nullable(),//.required(),
+  phoneNumber: yup.string().nullable(),//.required(),
   quantity: yup.number().nullable(),//.required(),
-  radio: yup.string().nullable().required(),
-  select: yup.string().nullable().required(),
-  switch: yup.string().nullable().required(),
-  textarea: yup.string().nullable().required(),
-  timepicker: yup.string().nullable().required(),
+  radio: yup.string().nullable(),//.required(),
+  select: yup.string().nullable(),//.required(),
+  switch: yup.string().nullable(),//.required(),
+  textarea: yup.string().nullable(),//.required(),
+  timepicker: yup.string().nullable(),//.required(),
 });
 
 function FormFormik(): ReactElement {
@@ -55,8 +55,8 @@ function FormFormik(): ReactElement {
       {/* KO reset */}
       <div>
         <OdsCheckbox
-          isChecked={ !!formik.values.checkbox }
-          // isRequired={ true }
+          type="checkbox"
+          isChecked={ false }
           inputId="checkbox"
           name="checkbox"
           onOdsBlur={ formik.handleBlur }
@@ -72,7 +72,7 @@ function FormFormik(): ReactElement {
         defaultValue={ formik.initialValues.datepicker }
         hasError={ formik.touched.datepicker && !!formik.errors.datepicker }
         isClearable={ true }
-        isRequired={ true }
+        // isRequired={ true }
         name="datepicker"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }
@@ -83,7 +83,7 @@ function FormFormik(): ReactElement {
       <OdsInput
         hasError={ formik.touched.inputNumber && !!formik.errors.inputNumber }
         isClearable={ true }
-        isRequired={ true }
+        // isRequired={ true }
         name="inputNumber"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }
@@ -95,7 +95,7 @@ function FormFormik(): ReactElement {
       <OdsInput
         hasError={ formik.touched.inputText && !!formik.errors.inputText }
         isClearable={ true }
-        isRequired={ true }
+        // isRequired={ true }
         name="inputText"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }
@@ -111,7 +111,7 @@ function FormFormik(): ReactElement {
         defaultValue={ formik.initialValues.password }
         hasError={ formik.touched.password && !!formik.errors.password }
         isClearable={ true }
-        isRequired={ true }
+        // isRequired={ true }
         name="password"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }
@@ -125,7 +125,7 @@ function FormFormik(): ReactElement {
         defaultValue={ formik.initialValues.phoneNumber }
         hasError={ formik.touched.phoneNumber && !!formik.errors.phoneNumber }
         isClearable={ true }
-        isRequired={ true }
+        // isRequired={ true }
         isoCode="fr"
         name="phoneNumber"
         onOdsBlur={ formik.handleBlur }
@@ -139,7 +139,7 @@ function FormFormik(): ReactElement {
         // @ts-ignore IDE try to match another react specific attribute
         defaultValue={ formik.initialValues.quantity }
         hasError={ formik.touched.quantity && !!formik.errors.quantity }
-        isRequired={ true }
+        // isRequired={ true }
         name="quantity"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }
@@ -150,7 +150,7 @@ function FormFormik(): ReactElement {
       <div>
         <OdsRadio
           isChecked={ formik.values.radio === 'radio-1' }
-          isRequired={ true }
+          // isRequired={ true }
           inputId="radio1"
           name="radio"
           onOdsBlur={ formik.handleBlur }
@@ -161,7 +161,7 @@ function FormFormik(): ReactElement {
 
         <OdsRadio
           isChecked={ formik.values.radio === 'radio-2' }
-          isRequired={ true }
+          // isRequired={ true }
           inputId="radio2"
           name="radio"
           onOdsBlur={ formik.handleBlur }
@@ -176,7 +176,7 @@ function FormFormik(): ReactElement {
         // @ts-ignore IDE try to match another react specific attribute
         defaultValue={ formik.initialValues.select }
         hasError={ formik.touched.select && !!formik.errors.select }
-        isRequired={ true }
+        // isRequired={ true }
         name="select"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }
@@ -192,7 +192,7 @@ function FormFormik(): ReactElement {
 
       {/* KO Reset */}
       <OdsSwitch
-        isRequired={ true }
+        // isRequired={ true }
         name="switch"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }
@@ -217,7 +217,7 @@ function FormFormik(): ReactElement {
       <OdsTextarea
         defaultValue={ formik.initialValues.textarea }
         hasError={ formik.touched.textarea && !!formik.errors.textarea }
-        isRequired={ true }
+        // isRequired={ true }
         name="textarea"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }
@@ -228,7 +228,7 @@ function FormFormik(): ReactElement {
       <OdsTimepicker
         defaultValue={ formik.initialValues.timepicker }
         hasError={ formik.touched.timepicker && !!formik.errors.timepicker }
-        isRequired={ true }
+        // isRequired={ true }
         name="timepicker"
         onOdsBlur={ formik.handleBlur }
         onOdsChange={ formik.handleChange }

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
@@ -50,7 +50,7 @@ export class OdsCheckbox {
       if (!inputCheckbox) {
         return;
       }
-      if (checkbox.getAttribute('is-checked') === '') {
+      if (checkbox.getAttribute('is-checked') !== null && checkbox.getAttribute('is-checked') !== 'false') {
         inputCheckbox.checked = true;
       } else {
         inputCheckbox.checked = false;
@@ -60,6 +60,10 @@ export class OdsCheckbox {
     hasChange && this.onInput();
   }
 
+  async formResetCallback(): Promise<void> {
+    await this.reset();
+  }
+
   private getOdsCheckboxGroupByName(): NodeListOf<Element> {
     return document.querySelectorAll(`ods-checkbox[name="${this.name}"]`);
   }

diff --git a/packages/ods/src/components/radio/src/components/ods-radio/ods-radio.tsx b/packages/ods/src/components/radio/src/components/ods-radio/ods-radio.tsx
@@ -54,7 +54,7 @@ export class OdsRadio {
       if (!inputRadio) {
         return;
       }
-      if (radio.getAttribute('is-checked') !== null) {
+      if (radio.getAttribute('is-checked') !== null && radio.getAttribute('is-checked') !== 'false') {
         inputRadio.checked = true;
       } else {
         inputRadio.checked = false;
@@ -74,6 +74,10 @@ export class OdsRadio {
     this.inputEl?.click();
   }
 
+  async formResetCallback(): Promise<void> {
+    await this.reset();
+  }
+
   private getOdsRadiosGroupByName(): NodeListOf<Element> {
     return document.querySelectorAll(`ods-radio[name="${this.name}"]`);
   }

diff --git a/packages/ods/src/components/radio/tests/behaviour/ods-radio.e2e.ts b/packages/ods/src/components/radio/tests/behaviour/ods-radio.e2e.ts
@@ -185,7 +185,7 @@ describe('ods-radio behaviour', () => {
       await submitButton.click();
       await page.waitForNetworkIdle();
       const url = new URL(page.url());
-      expect(url.searchParams.get('name')).toBeNull();
+      expect(url.searchParams.get('name')).toBe('huey');
     });
   });
 });