Add highlighting for invalid/undone questions and show error messages

public/demo-form-elements/config.json

@@ -393,7 +393,10 @@
           ],
           "minSelections": 1,
           "maxSelections": 3,
-          "default": ["Line", "test"]
+          "default": [
+            "Line",
+            "test"
+          ]
         },
         {
           "id": "default-radio",
@@ -1003,4 +1006,4 @@
       "Sidebar Form Elements"
     ]
   }
-}
+}

src/components/NextButton.tsx

@@ -15,6 +15,7 @@ type Props = {
   config?: IndividualComponent;
   location?: ResponseBlockLocation;
   checkAnswer: JSX.Element | null;
+  onNext: () => void;
 };
 
 export function NextButton({
@@ -23,6 +24,7 @@ export function NextButton({
   config,
   location,
   checkAnswer,
+  onNext,
 }: Props) {
   const { isNextDisabled, goToNextStep } = useNextStep();
   const studyConfig = useStudyConfig();
@@ -70,7 +72,7 @@ export function NextButton({
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       if (event.key === 'Enter' && !disabled && !isNextDisabled && buttonTimerSatisfied) {
-        goToNextStep();
+        onNext();
       }
     };
 
@@ -81,7 +83,7 @@ export function NextButton({
       };
     }
     return () => {};
-  }, [disabled, isNextDisabled, buttonTimerSatisfied, goToNextStep, nextOnEnter]);
+  }, [disabled, isNextDisabled, buttonTimerSatisfied, onNext, nextOnEnter]);
 
   const nextButtonDisabled = useMemo(() => disabled || isNextDisabled || !buttonTimerSatisfied, [disabled, isNextDisabled, buttonTimerSatisfied]);
   const previousButtonText = useMemo(() => config?.previousButtonText ?? studyConfig.uiConfig.previousButtonText ?? 'Previous', [config, studyConfig]);
@@ -99,7 +101,7 @@ export function NextButton({
         <Button
           type="submit"
           disabled={nextButtonDisabled}
-          onClick={() => goToNextStep()}
+          onClick={() => onNext()}
           px={location === 'sidebar' && checkAnswer ? 8 : undefined}
         >
           {label}

src/components/response/ButtonsInput.tsx

@@ -3,7 +3,6 @@ import {
 } from '@mantine/core';
 import { useMemo } from 'react';
 import { ButtonsResponse, ParsedStringOption } from '../../parser/types';
-import { generateErrorMessage } from './utils';
 import classes from './css/ButtonsInput.module.css';
 import { useStoredAnswer } from '../../store/hooks/useStoredAnswer';
 import { InputLabel } from './InputLabel';
@@ -14,12 +13,14 @@ export function ButtonsInput({
   response,
   disabled,
   answer,
+  error,
   index,
   enumerateQuestions,
 }: {
   response: ButtonsResponse;
   disabled: boolean;
   answer: { value?: string };
+  error?: string | null;
   index: number;
   enumerateQuestions: boolean;
 }) {
@@ -39,8 +40,6 @@ export function ButtonsInput({
     [optionOrders, options, response.id],
   );
 
-  const error = useMemo(() => generateErrorMessage(response, answer, orderedOptions), [response, answer, orderedOptions]);
-
   return (
     <FocusTrap>
       <Radio.Group
@@ -50,7 +49,7 @@ export function ButtonsInput({
         key={response.id}
         {...answer}
         error={error}
-        errorProps={{ c: required ? 'red' : 'orange' }}
+        errorProps={{ c: required ? 'red' : 'orange', fz: 'sm', mt: 'xs' }}
         style={{ '--input-description-size': 'calc(var(--mantine-font-size-md) - calc(0.125rem * var(--mantine-scale)))' }}
       >
         <Flex justify="space-between" align="center" gap="xl" mt="xs">

src/components/response/CheckBoxInput.tsx

@@ -3,7 +3,7 @@ import {
 } from '@mantine/core';
 import { useEffect, useMemo, useState } from 'react';
 import { CheckboxResponse, ParsedStringOption } from '../../parser/types';
-import { DONT_KNOW_DEFAULT_VALUE, generateErrorMessage, normalizeCheckboxDontKnowValue } from './utils';
+import { DONT_KNOW_DEFAULT_VALUE, normalizeCheckboxDontKnowValue } from './utils';
 import { HorizontalHandler } from './HorizontalHandler';
 import classes from './css/Checkbox.module.css';
 import inputClasses from './css/Input.module.css';
@@ -16,6 +16,7 @@ export function CheckBoxInput({
   response,
   disabled,
   answer,
+  error,
   index,
   enumerateQuestions,
   otherValue,
@@ -24,6 +25,7 @@ export function CheckBoxInput({
   response: CheckboxResponse;
   disabled: boolean;
   answer: { value?: string[]; onChange?: (value: string[]) => void };
+  error?: string | null;
   index: number;
   enumerateQuestions: boolean;
   otherValue?: object;
@@ -48,11 +50,6 @@ export function CheckBoxInput({
   );
 
   const [otherSelected, setOtherSelected] = useState(false);
-
-  const error = useMemo(
-    () => generateErrorMessage(response, { ...answer, dontKnowChecked: !!dontKnowCheckbox?.checked }, orderedOptions),
-    [response, answer, orderedOptions, dontKnowCheckbox?.checked],
-  );
   const selectedValues = useMemo(() => (Array.isArray(answer.value) ? answer.value : []), [answer.value]);
 
   useEffect(() => {
@@ -81,7 +78,7 @@ export function CheckBoxInput({
       description={secondaryText}
       {...answer}
       error={error}
-      errorProps={{ c: required ? 'red' : 'orange' }}
+      errorProps={{ c: required ? 'red' : 'orange', fz: 'sm', mt: 'xs' }}
       style={{ '--input-description-size': 'calc(var(--mantine-font-size-md) - calc(0.125rem * var(--mantine-scale)))' }}
     >
       <Box mt="xs">

src/components/response/DropdownInput.tsx

@@ -1,6 +1,5 @@
 import { MultiSelect, Select } from '@mantine/core';
 import { DropdownResponse } from '../../parser/types';
-import { generateErrorMessage } from './utils';
 import classes from './css/Input.module.css';
 import { InputLabel } from './InputLabel';
 import { OptionLabel } from './OptionLabel';
@@ -10,12 +9,14 @@ export function DropdownInput({
   response,
   disabled,
   answer,
+  error,
   index,
   enumerateQuestions,
 }: {
   response: DropdownResponse;
   disabled: boolean;
   answer: { value: string };
+  error?: string | null;
   index: number;
   enumerateQuestions: boolean;
 }) {
@@ -40,15 +41,15 @@ export function DropdownInput({
         disabled={disabled}
         label={prompt.length > 0 && <InputLabel prompt={prompt} required={required} index={index} enumerateQuestions={enumerateQuestions} infoText={infoText} />}
         description={secondaryText}
-        placeholder={answer.value.length === 0 ? placeholder : undefined}
+        placeholder={!answer.value || answer.value.length === 0 ? placeholder : undefined}
         data={optionsAsStringOptions}
         radius="md"
         size="md"
         {...answer}
-        value={answer.value === '' ? [] : Array.isArray(answer.value) ? answer.value : [answer.value]}
-        error={generateErrorMessage(response, answer, optionsAsStringOptions)}
+        value={Array.isArray(answer.value) ? answer.value : answer.value ? [answer.value] : []}
+        error={error}
         withErrorStyles={required}
-        errorProps={{ c: required ? 'red' : 'orange' }}
+        errorProps={{ c: required ? 'red' : 'orange', fz: 'sm', mt: 'xs' }}
         classNames={{ input: classes.fixDisabled }}
         maxDropdownHeight={200}
         clearable
@@ -65,10 +66,10 @@ export function DropdownInput({
         radius="md"
         size="md"
         {...answer}
-        value={answer.value === '' ? null : answer.value}
-        error={generateErrorMessage(response, answer, optionsAsStringOptions)}
+        value={answer.value || null}
+        error={error}
         withErrorStyles={required}
-        errorProps={{ c: required ? 'red' : 'orange' }}
+        errorProps={{ c: required ? 'red' : 'orange', fz: 'sm', mt: 'xs' }}
         classNames={{ input: classes.fixDisabled }}
         maxDropdownHeight={200}
         renderOption={renderOption}

src/components/response/LikertInput.tsx

@@ -5,12 +5,14 @@ export function LikertInput({
   response,
   disabled,
   answer,
+  error,
   index,
   enumerateQuestions,
 }: {
   response: LikertResponse;
   disabled: boolean;
-  answer: object;
+  answer: { value?: string };
+  error?: string | null;
   index: number;
   enumerateQuestions: boolean;
 }) {
@@ -38,6 +40,7 @@ export function LikertInput({
       disabled={disabled}
       response={radioResponse}
       answer={answer}
+      error={error}
       index={index}
       enumerateQuestions={enumerateQuestions}
       stretch

src/components/response/MatrixInput.tsx

@@ -11,7 +11,6 @@ import radioClasses from './css/Radio.module.css';
 import { useStoredAnswer } from '../../store/hooks/useStoredAnswer';
 import { InputLabel } from './InputLabel';
 import { OptionLabel } from './OptionLabel';
-import { generateErrorMessage } from './utils';
 import { parseStringOptions } from '../../utils/stringOptions';
 import { getMatrixAnswerOptions, isMatrixDontKnowValue, MATRIX_DONT_KNOW_OPTION } from '../../utils/responseOptions';
 
@@ -45,7 +44,7 @@ function CheckboxComponent({
         <Checkbox
           disabled={disabled}
           key={`${checkbox.label}-${idx}`}
-          checked={(answer.value[question] || '').split('|').includes(checkbox.value)}
+          checked={(answer.value?.[question] || '').split('|').includes(checkbox.value)}
           onChange={(event) => onChange(event, question, checkbox)}
           value={checkbox.value}
           classNames={{ input: checkboxClasses.fixDisabled, icon: checkboxClasses.fixDisabledIcon }}
@@ -82,7 +81,7 @@ function RadioGroupComponent({
         flex: 1,
       }}
       onChange={(val) => onChange(val, question)}
-      value={answer.value[question]}
+      value={answer.value?.[question]}
     >
       <div
         style={{
@@ -110,12 +109,14 @@ export function MatrixInput({
   answer,
   index,
   disabled,
+  error,
   enumerateQuestions,
 }: {
   response: MatrixResponse;
   answer: { value: Record<string, string> };
   index: number;
   disabled: boolean;
+  error?: string | null;
   enumerateQuestions: boolean;
 }) {
   const { setMatrixAnswersRadio, setMatrixAnswersCheckbox } = useStoreActions();
@@ -179,8 +180,6 @@ export function MatrixInput({
     dispatchCheckboxUpdate(option.value, isChecked);
   };
 
-  const error = generateErrorMessage(response, answer);
-
   const _n = _choices.length;
   const _m = orderedQuestions.length;
   const dontKnowIndex = _choices.findIndex(

src/components/response/NumericInput.tsx

@@ -1,19 +1,20 @@
 import { NumberInput } from '@mantine/core';
 import { NumericalResponse } from '../../parser/types';
-import { generateErrorMessage } from './utils';
 import classes from './css/Input.module.css';
 import { InputLabel } from './InputLabel';
 
 export function NumericInput({
   response,
   disabled,
   answer,
+  error,
   index,
   enumerateQuestions,
 }: {
   response: NumericalResponse;
   disabled: boolean;
-  answer: object;
+  answer: { value?: number };
+  error?: string | null;
   index: number;
   enumerateQuestions: boolean;
 }) {
@@ -34,9 +35,9 @@ export function NumericInput({
       radius="md"
       size="md"
       {...answer}
-      error={generateErrorMessage(response, answer)}
+      error={error}
       withErrorStyles={required}
-      errorProps={{ c: required ? 'red' : 'orange' }}
+      errorProps={{ c: required ? 'red' : 'orange', fz: 'sm', mt: 'xs' }}
       classNames={{ input: classes.fixDisabled }}
     />
   );

src/components/response/RadioInput.tsx

@@ -3,7 +3,6 @@ import {
 } from '@mantine/core';
 import { useState, useMemo } from 'react';
 import { ParsedStringOption, RadioResponse } from '../../parser/types';
-import { generateErrorMessage } from './utils';
 import { HorizontalHandler } from './HorizontalHandler';
 import classes from './css/Radio.module.css';
 import inputClasses from './css/Input.module.css';
@@ -16,14 +15,16 @@ export function RadioInput({
   response,
   disabled,
   answer,
+  error,
   index,
   enumerateQuestions,
   stretch,
   otherValue,
 }: {
   response: RadioResponse;
   disabled: boolean;
-  answer: object;
+  answer: { value?: string; onChange?: (value: string) => void };
+  error?: string | null;
   index: number;
   enumerateQuestions: boolean;
   stretch?: boolean;
@@ -51,8 +52,6 @@ export function RadioInput({
   );
 
   const [otherSelected, setOtherSelected] = useState(false);
-
-  const error = useMemo(() => generateErrorMessage(response, answer, orderedOptions), [response, answer, orderedOptions]);
   const label = useMemo(() => ((horizontal && labelLocation) ? labelLocation : 'inline'), [labelLocation, horizontal]);
 
   return (
@@ -63,7 +62,7 @@ export function RadioInput({
       key={response.id}
       {...answer}
       error={error}
-      errorProps={{ c: required ? 'red' : 'orange' }}
+      errorProps={{ c: required ? 'red' : 'orange', fz: 'sm', mt: 'xs' }}
       style={{ '--input-description-size': 'calc(var(--mantine-font-size-md) - calc(0.125rem * var(--mantine-scale)))' }}
     >
       {horizontal && label === 'above' && (leftLabel || rightLabel) && (

src/components/response/RankingInput.tsx

@@ -540,12 +540,14 @@ function RankingPairwiseComponent({
 export function RankingInput({
   response,
   answer,
+  error,
   index: idx,
   disabled,
   enumerateQuestions,
 }: {
   response: RankingResponse;
   answer: { value: Record<string, string> };
+  error?: string | null;
   index: number;
   disabled: boolean;
   enumerateQuestions: boolean;
@@ -559,7 +561,8 @@ export function RankingInput({
     numItems,
   } = response;
 
-  const [error, setError] = useState<string | null>(null);
+  const [localError, setError] = useState<string | null>(null);
+  const displayError = localError || error;
 
   const componentProps = {
     disabled, options, answer, responseId: response.id, numItems,
@@ -571,9 +574,9 @@ export function RankingInput({
         <InputLabel prompt={prompt} required={required} index={idx} enumerateQuestions={enumerateQuestions} infoText={infoText} />
       )}
       {secondaryText && <Text c="dimmed" size="sm" mt={0}>{secondaryText}</Text>}
-      {error && (
+      {displayError && (
         <Text c={required ? 'red' : 'orange'} size="sm" mt="xs">
-          {error}
+          {displayError}
         </Text>
       )}
       <Box mt="md">