feat(ValidatedTextInput): add optional onChange prop to ValidatedTe…

…xtInput 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

@@ -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}

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}

src/hooks/useFormState/useFormState.ts

@@ -256,14 +256,17 @@ export const getFormGroupProps = <T>(
 export interface TextFieldOptions {
   greenWhenValid?: boolean;
   onBlur?: () => void;
+  onChange?: (value: string) => void;
 }
 
 export const getTextFieldProps = (
   field: IValidatedFormField<string> | IValidatedFormField<string | undefined>,
   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?.();