Merge pull request #211 from onebeyond/fix-dependent-question-for-multiple-checkboxes

Fix/Shows dependent questions of multiple_checkboxes fields

Author: inigomarquinez

CHANGELOG.md

@@ -187,7 +187,25 @@
               "disableOthers": true
             }
           ]
-        }
+        },
+        "dependentQuestions": [
+          {
+            "condition": "others",
+            "question": {
+              "name": "test",
+              "type": "input",
+              "label": "Confirm password",
+              "placeholder": "Confirm password",
+              "errorMessages": {
+                "required": "This field is required",
+                "doesNotMatch": "The passwords do not match"
+              },
+              "registerConfig": {
+                "required": true
+              }
+            }
+          }
+        ]
       },
       {
         "name": "age",

example/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@onebeyond/react-form-builder",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "React from builder using json schema",
   "author": "One Beyond",
   "license": "MIT",

example/src/forms/Contact/forms.json

@@ -26,12 +26,13 @@ const disableOthers = (e) => {
   })
 }
 
-const QuestionMultipleCheckboxes = ({ component, form, question, useForm }) => {
+const QuestionMultipleCheckboxes = ({ question, useForm }) => {
   const {
     formState: { errors },
     getValues,
     register
   } = useForm
+
   return (
     <div
       sx={{
@@ -70,7 +71,7 @@ const QuestionMultipleCheckboxes = ({ component, form, question, useForm }) => {
                     }}
                   >
                     <Checkbox
-                      data-testid='question-singleCheckbox'
+                      data-testid="question-singleCheckbox"
                       id={option.name}
                       aria-describedby={'error_message_' + question.name}
                       name={question.name}
@@ -80,6 +81,7 @@ const QuestionMultipleCheckboxes = ({ component, form, question, useForm }) => {
                       )}
                       {...register(question.name, {
                         ...question.registerConfig,
+                        onChange: option.disableOthers && disableOthers,
                         validate: {
                           minimumLen: question.registerConfig.minimumLen
                             ? () =>
@@ -95,7 +97,6 @@ const QuestionMultipleCheckboxes = ({ component, form, question, useForm }) => {
                             : () => true
                         }
                       })}
-                      onChange={option.disableOthers && disableOthers}
                     />
                     {option.src ? (
                       <img src={option.src} />

package-lock.json

@@ -213,7 +213,6 @@ const FormBuilder = ({
           <QuestionMultipleCheckboxes
             useForm={useFormObj}
             question={question}
-            form={form}
           />
           {question.dependentQuestions &&
             question.dependentQuestions.map(