From f06de7ed26a56a9d62aa65f8e0e54430dee1338f Mon Sep 17 00:00:00 2001
From: Mike Turley <mike.turley@alum.cs.umass.edu>
Date: Tue, 1 Mar 2022 14:37:41 -0500
Subject: [PATCH] feat(ValidatedTextInput): add optional `onChange` prop to
 ValidatedTextInput for extra effects defined in the parent component (#97)

In addition to having the onChange option in useFormField, this adds an onChange prop to ValidatedTextInput
in order to trigger additional effects (like resetting query state) at the component level rather than at the form state level.
---
 src/components/ValidatedTextInput/ValidatedPasswordInput.tsx | 5 ++++-
 src/components/ValidatedTextInput/ValidatedTextInput.tsx     | 5 ++++-
 src/hooks/useFormState/useFormState.ts                       | 5 ++++-
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx b/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx
index 0baaf99..41542a3 100644
--- a/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx
+++ b/src/components/ValidatedTextInput/ValidatedPasswordInput.tsx
@@ -18,6 +18,8 @@ interface IValidatedPasswordInputProps
   greenWhenValid?: boolean;
   /** Extra callback to call onBlur in addition to setting the field isTouched in state */
   onBlur?: () => void;
+  /** Extra callback to call onChange in addition to setting the field value in state */
+  onChange?: (value: string) => void;
   /** Any extra props for the PatternFly FormGroup */
   formGroupProps?: Partial<FormGroupProps>;
   /** Any extra props for the PatternFly TextInput */
@@ -33,13 +35,14 @@ export const ValidatedPasswordInput: React.FunctionComponent<IValidatedPasswordI
   isRequired,
   greenWhenValid = false,
   onBlur,
+  onChange,
   formGroupProps = {},
   inputProps = {},
   showPasswordAriaLabel = `Show ${label}`,
   hidePasswordAriaLabel = `Hide ${label}`,
 }: IValidatedPasswordInputProps) => {
   const [isValueVisible, toggleValueVisible] = React.useReducer((isVisible) => !isVisible, false);
-  const options: TextFieldOptions = { greenWhenValid, onBlur };
+  const options: TextFieldOptions = { greenWhenValid, onBlur, onChange };
   return (
     <FormGroup
       label={label}
diff --git a/src/components/ValidatedTextInput/ValidatedTextInput.tsx b/src/components/ValidatedTextInput/ValidatedTextInput.tsx
index ecf3dcf..8f0b23e 100644
--- a/src/components/ValidatedTextInput/ValidatedTextInput.tsx
+++ b/src/components/ValidatedTextInput/ValidatedTextInput.tsx
@@ -26,6 +26,8 @@ interface IValidatedTextInputProps
   greenWhenValid?: boolean;
   /** Extra callback to call onBlur in addition to setting the field isTouched in state */
   onBlur?: () => void;
+  /** Extra callback to call onChange in addition to setting the field value in state */
+  onChange?: (value: string) => void;
   /** Any extra props for the PatternFly FormGroup */
   formGroupProps?: Partial<FormGroupProps>;
   /** Any extra props for the PatternFly TextInput or TextArea */
@@ -41,10 +43,11 @@ export const ValidatedTextInput: React.FunctionComponent<IValidatedTextInputProp
   type = 'text',
   greenWhenValid = false,
   onBlur,
+  onChange,
   formGroupProps = {},
   inputProps = {},
 }: IValidatedTextInputProps) => {
-  const options: TextFieldOptions = { greenWhenValid, onBlur };
+  const options: TextFieldOptions = { greenWhenValid, onBlur, onChange };
   return (
     <FormGroup
       label={label}
diff --git a/src/hooks/useFormState/useFormState.ts b/src/hooks/useFormState/useFormState.ts
index e595a9e..c4a704f 100644
--- a/src/hooks/useFormState/useFormState.ts
+++ b/src/hooks/useFormState/useFormState.ts
@@ -256,6 +256,7 @@ export const getFormGroupProps = <T>(
 export interface TextFieldOptions {
   greenWhenValid?: boolean;
   onBlur?: () => void;
+  onChange?: (value: string) => void;
 }
 
 export const getTextFieldProps = (
@@ -263,7 +264,9 @@ export const getTextFieldProps = (
   options?: TextFieldOptions
 ): Pick<TextInputProps | TextAreaProps, 'value' | 'onChange' | 'onBlur' | 'validated'> => ({
   value: field.value,
-  onChange: field.setValue,
+  onChange: (value: string) => {
+    field.setValue(value), options?.onChange?.(value);
+  },
   onBlur: () => {
     field.setIsTouched(true);
     options?.onBlur?.();