diff --git a/front_end/src/app/(main)/questions/components/group_form.tsx b/front_end/src/app/(main)/questions/components/group_form.tsx index 2fc18ffe08..33ff1e12bb 100644 --- a/front_end/src/app/(main)/questions/components/group_form.tsx +++ b/front_end/src/app/(main)/questions/components/group_form.tsx @@ -628,6 +628,8 @@ const GroupForm: React.FC = ({ }) ); }} + control={control} + index={index} /> )} diff --git a/front_end/src/app/(main)/questions/components/numeric_question_input.tsx b/front_end/src/app/(main)/questions/components/numeric_question_input.tsx index abf3da6b25..8610a7baed 100644 --- a/front_end/src/app/(main)/questions/components/numeric_question_input.tsx +++ b/front_end/src/app/(main)/questions/components/numeric_question_input.tsx @@ -2,10 +2,11 @@ import { format } from "date-fns"; import { isNil } from "lodash"; import dynamic from "next/dynamic"; import { useEffect, useRef, useState } from "react"; +import { FieldValues, UseFormReturn } from "react-hook-form"; import Checkbox from "@/components/ui/checkbox"; import DatetimeUtc from "@/components/ui/datetime_utc"; -import { Input } from "@/components/ui/form_field"; +import { FormError, Input } from "@/components/ui/form_field"; import { QuestionWithNumericForecasts } from "@/types/question"; import { QuestionType } from "@/types/question"; @@ -38,6 +39,8 @@ const NumericQuestionInput: React.FC<{ defaultZeroPoint: number | undefined | null; hasForecasts: boolean; chartWidth?: number; + control?: UseFormReturn; + index?: number; }> = ({ onChange, questionType, @@ -48,6 +51,8 @@ const NumericQuestionInput: React.FC<{ defaultZeroPoint, hasForecasts, chartWidth = 800, + control, + index, }) => { const [errors, setError] = useState([]); const [max, setMax] = useState(defaultMax); @@ -118,10 +123,10 @@ const NumericQuestionInput: React.FC<{ const runChecks = () => { const current_errors = []; - if (max === undefined) { + if (isNil(max)) { current_errors.push("Max is required"); } - if (min === undefined) { + if (isNil(min)) { current_errors.push("Min is required"); } @@ -136,7 +141,7 @@ const NumericQuestionInput: React.FC<{ ); } } - if (min !== undefined && max !== undefined) { + if (!isNil(min) && !isNil(max)) { if (isNaN(min) || isNaN(max)) { current_errors.push("Provide correct min and max values"); } @@ -245,8 +250,20 @@ const NumericQuestionInput: React.FC<{ : undefined } onChange={(dateString) => { + control?.clearErrors(`min-value-${index}`); setMin(new Date(dateString).getTime() / 1000); }} + onError={(error: { message: string }) => { + control && + control.setError(`min-value-${index}`, { + type: "manual", + message: error.message, + }); + }} + /> +
@@ -261,8 +278,19 @@ const NumericQuestionInput: React.FC<{ : undefined } onChange={(dateString) => { + control?.clearErrors(`max-value-${index}`); setMax(new Date(dateString).getTime() / 1000); }} + onError={(error: { message: string }) => { + control?.setError(`max-value-${index}`, { + type: "manual", + message: error.message, + }); + }} + /> +
diff --git a/front_end/src/app/(main)/questions/components/question_form.tsx b/front_end/src/app/(main)/questions/components/question_form.tsx index f21c26fd25..644e11ffa5 100644 --- a/front_end/src/app/(main)/questions/components/question_form.tsx +++ b/front_end/src/app/(main)/questions/components/question_form.tsx @@ -519,6 +519,7 @@ const QuestionForm: FC = ({ defaultOpenUpperBound={post?.question?.open_upper_bound} defaultZeroPoint={post?.question?.scaling.zero_point} hasForecasts={hasForecasts && mode !== "create"} + control={control} onChange={({ min: rangeMin, max: rangeMax, diff --git a/front_end/src/components/ui/datetime_utc.tsx b/front_end/src/components/ui/datetime_utc.tsx index 1eea04d565..9c3f619493 100644 --- a/front_end/src/components/ui/datetime_utc.tsx +++ b/front_end/src/components/ui/datetime_utc.tsx @@ -59,6 +59,7 @@ const DatetimeUtc: React.FC = ({ type="datetime-local" defaultValue={localValue} onChange={handleChange} + onBlur={handleChange} {...props} /> );