From 7357ece87f4f61be0fa20284a99d710fb7bc9235 Mon Sep 17 00:00:00 2001
From: Karen <sidokaren@icloud.com>
Date: Wed, 25 Jan 2023 11:05:16 +0100
Subject: [PATCH] (bug) show error validation message

---
 .../javascript/components/form/form-input.tsx    | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/frontend/src/javascript/components/form/form-input.tsx b/app/frontend/src/javascript/components/form/form-input.tsx
index 82169126c..ccffd521c 100644
--- a/app/frontend/src/javascript/components/form/form-input.tsx
+++ b/app/frontend/src/javascript/components/form/form-input.tsx
@@ -1,6 +1,6 @@
-import { ReactNode, useCallback, useState } from 'react';
+import { ReactNode, useCallback, useState, useEffect } from 'react';
 import * as React from 'react';
-import { FieldPathValue } from 'react-hook-form';
+import { FieldPathValue, UseFormGetValues } from 'react-hook-form';
 import { debounce as _debounce } from 'lodash';
 import { FieldValues } from 'react-hook-form/dist/types/fields';
 import { FieldPath } from 'react-hook-form/dist/types/path';
@@ -22,13 +22,14 @@ type FormInputProps<TFieldValues, TInputType> = FormComponent<TFieldValues> & Ab
   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void,
   nullable?: boolean,
   ariaLabel?: string,
-  maxLength?: number
+  maxLength?: number,
+  getValues?: UseFormGetValues<FieldValues>
 }
 
 /**
  * This component is a template for an input component to use within React Hook Form
  */
-export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, register, label, tooltip, defaultValue, icon, className, rules, disabled, type, addOn, addOnAction, addOnClassName, addOnAriaLabel, placeholder, error, warning, formState, step, onChange, debounce, accept, nullable = false, ariaLabel, maxLength }: FormInputProps<TFieldValues, TInputType>) => {
+export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, register, getValues, label, tooltip, defaultValue, icon, className, rules, disabled, type, addOn, addOnAction, addOnClassName, addOnAriaLabel, placeholder, error, warning, formState, step, onChange, debounce, accept, nullable = false, ariaLabel, maxLength }: FormInputProps<TFieldValues, TInputType>) => {
   const [characterCount, setCharacterCount] = useState<number>(0);
 
   /**
@@ -69,6 +70,13 @@ export const FormInput = <TFieldValues extends FieldValues, TInputType>({ id, re
     }
   };
 
+  // If maxLength and getValues is provided, uses input ref to initiate the countdown of characters
+  useEffect(() => {
+    if (getValues && maxLength) {
+      setCharacterCount(getValues(id).length);
+    }
+  }, [maxLength, getValues]);
+
   // Compose classnames from props
   const classNames = [
     `${className || ''}`,