fix(dateinput): clear validation errors when a datepicker selects a date

YJDH-684.

Since the HDS DateInput has a compatibility issue with React-hook-forms,
The onChange should include processes to
1) clear the input validation errors and
2) set the input value.
Otherwise the errors are not cleared when a datepicker is used.

The onChange is currently not in the same format
as the HDS dateinput is expecting it to be.

HDS DateInputProps are waiting for (value: string, valueAsDate: Date),
but onChange from the InputProps is (value: string).
OnChange of the React-hook-Forms waits a SyntheticEvent as a parameter.

NOTE: The HDS v. 3.0.0 will change the DateInput onChange to have an Event as a parameter.

frontend/kesaseteli/employer/src/components/application/form/DateInput.tsx

@@ -30,8 +30,15 @@ const DateInput = ({
 }: Props): ReturnType<typeof HdsDateInput> => {
   const { t } = useTranslation();
 
-  const { defaultLabel, getValue, getError, getErrorText, setError } =
-    useApplicationFormField<string>(id);
+  const {
+    defaultLabel,
+    getValue,
+    setValue,
+    getError,
+    getErrorText,
+    setError,
+    clearErrors,
+  } = useApplicationFormField<string>(id);
 
   const date = convertToUIDateFormat(getValue());
 
@@ -61,6 +68,14 @@ const DateInput = ({
       initialValue={date}
       errorText={getErrorText()}
       label={defaultLabel}
+      onChange={(value) => {
+        // FIXME: Since the react-hook-forms onBlur is not called when a datepicker is used,
+        // the clear errors function needs to be called with a value setter.
+        // Otherwise the error message won't be cleared and
+        // the value remains invalid after the date has been picked.
+        clearErrors();
+        setValue(value);
+      }}
       {...$gridCellProps}
     />
   );

frontend/shared/src/components/forms/inputs/DateInput.tsx

@@ -8,14 +8,30 @@ import useLocale from 'shared/hooks/useLocale';
 import InputProps from 'shared/types/input-props';
 import { isValidDate, parseDate } from 'shared/utils/date.utils';
 import { isString } from 'shared/utils/type-guards';
-
 import { $DateInput } from './DateInput.sc';
 
-type Props<T> = InputProps<T> & GridCellProps;
+type Props<T> = Omit<InputProps<T>, 'onChange'> &
+  Required<{ onChange: InputProps<T>['onChange'] }> &
+  GridCellProps;
 
+/**
+ * NOTE: Since the HDS DateInput has a compatibility issue with React-hook-forms,
+ * The onChange should include processes to
+ * 1) clear the input validation errors and
+ * 2) set the input value.
+ * Otherwise the errors are not cleared when a datepicker is used.
+ *
+ * FIXME: This should change when the HDS is upgraded to the v. 3.0.0.
+ */
 const DateInput = <T,>({
   id,
   registerOptions,
+  // NOTE: the onChange is currently not in the same format
+  // as the HDS dateinput is expecting it to be.
+  // HDS DateInputProps are waiting for (value: string, valueAsDate: Date),
+  // but onChange from the InputProps is (value: string).
+  // It should also be noted that the React-Hook-Forms wants the OnChange
+  // to be called with a SyntheticEvent.
   onChange,
   initialValue,
   errorText,
@@ -24,19 +40,27 @@ const DateInput = <T,>({
 }: Props<T>): React.ReactElement<T> => {
   const locale = useLocale();
   const { register } = useFormContext<T>();
-
   const validate = React.useCallback(
     (value) => isString(value) && isValidDate(parseDate(value)),
     []
   );
+  const reactHookFormProps = register(id, {
+    ...registerOptions,
+    validate,
+    // NOTE: it may be so that the onChange and onBlur
+    // of the React-hook-forms should be called
+    // with the given onChange prop.
+    // There is just a problem that they needs a SyntheticEvent,
+    // that the current version of HDS does not support in it's date input.
+    // This will change in HDS v.3.0.0.
+    // onChange(event) {},
+    // onBlur(event) {},
+  });
 
   return (
     <$GridCell {...$gridCellProps}>
       <$DateInput
-        {...register(id, {
-          ...registerOptions,
-          validate,
-        })}
+        {...reactHookFormProps}
         key={id}
         id={id}
         data-testid={id}