fix: display fn validation errors in Question and Checklist editor …

…modals (#4149)
theopensystemslab · Jan 17, 2025 · 58e9220 · 58e9220
1 parent a6ecbdc
commit 58e9220
Showing 3 changed files with 27 additions and 21 deletions.
diff --git a/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx b/editor.planx.uk/src/@planx/components/Checklist/Editor/Editor.tsx
@@ -58,14 +58,14 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
               ...values,
               ...(groupedOptions
                 ? {
-                    categories: groupedOptions.map((group) => ({
-                      title: group.title,
-                      count: group.children.length,
-                    })),
-                  }
+                  categories: groupedOptions.map((group) => ({
+                    title: group.title,
+                    count: group.children.length,
+                  })),
+                }
                 : {
-                    categories: undefined,
-                  }),
+                  categories: undefined,
+                }),
             },
           },
           processedOptions,
@@ -89,7 +89,7 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
       }
       if (values.fn && !options?.some((option) => option.data.val)) {
         errors.fn =
-          "At least one option must set a data value when the checklist has a data field";
+          "At least one option must also set a data field";
       }
       if (exclusiveOptions && exclusiveOptions.length > 1) {
         errors.options =
@@ -139,10 +139,12 @@ export const ChecklistEditor: React.FC<ChecklistProps> = (props) => {
                 onChange={formik.handleChange}
               />
             </InputRow>
-            <DataFieldAutocomplete
-              value={formik.values.fn}
-              onChange={(value) => formik.setFieldValue("fn", value)}
-            />
+            <ErrorWrapper error={formik.errors.fn}>
+              <DataFieldAutocomplete
+                value={formik.values.fn}
+                onChange={(value) => formik.setFieldValue("fn", value)}
+              />
+            </ErrorWrapper>
             <InputRow>
               <Switch
                 checked={!!formik.values.groupedOptions}

diff --git a/editor.planx.uk/src/@planx/components/Question/Editor.tsx b/editor.planx.uk/src/@planx/components/Question/Editor.tsx
@@ -8,6 +8,7 @@ import ListManager from "ui/editor/ListManager/ListManager";
 import ModalSection from "ui/editor/ModalSection";
 import ModalSectionContent from "ui/editor/ModalSectionContent";
 import RichTextInput from "ui/editor/RichTextInput/RichTextInput";
+import ErrorWrapper from "ui/shared/ErrorWrapper";
 import Input from "ui/shared/Input/Input";
 import InputRow from "ui/shared/InputRow";
 import { Switch } from "ui/shared/Switch";
@@ -68,7 +69,7 @@ export const Question: React.FC<Props> = (props) => {
       const errors: FormikErrors<FormikValues> = {};
       if (values.fn && !options.some((option) => option.data.val)) {
         errors.fn =
-          "At least one option must set a data value when the question has a data field";
+          "At least one option must also set a data field";
       }
       return errors;
     },
@@ -116,11 +117,13 @@ export const Question: React.FC<Props> = (props) => {
                 onChange={formik.handleChange}
               />
             </InputRow>
-            <DataFieldAutocomplete
-              schema={schema?.nodes}
-              value={formik.values.fn}
-              onChange={(value) => formik.setFieldValue("fn", value)}
-            />
+            <ErrorWrapper error={formik.errors.fn}>
+              <DataFieldAutocomplete
+                schema={schema?.nodes}
+                value={formik.values.fn}
+                onChange={(value) => formik.setFieldValue("fn", value)}
+              />
+            </ErrorWrapper>
             <InputRow>
               <Switch
                 checked={formik.values.neverAutoAnswer}
@@ -151,8 +154,8 @@ export const Question: React.FC<Props> = (props) => {
               }) as Option
             }
             Editor={QuestionOptionsEditor}
-            editorExtraProps={{ 
-              showValueField: !!formik.values.fn, 
+            editorExtraProps={{
+              showValueField: !!formik.values.fn,
               schema: getOptionsSchemaByFn(formik.values.fn, schema?.options, initialOptionVals),
             }}
           />

diff --git a/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx b/editor.planx.uk/src/@planx/components/shared/BaseOptionsEditor.tsx
@@ -76,8 +76,9 @@ export const BaseOptionsEditor: React.FC<BaseOptionsEditorProps> = (props) => (
     )}
     {props.showValueField && (
       <DataFieldAutocomplete
+        key={`${props.value.id}-data-field-autocomplete`}
         schema={props.schema}
-        value={props.value.data.val || ""}
+        value={props.value.data.val}
         onChange={(targetValue) => {
           props.onChange({
             ...props.value,