[7.x] [Form lib] Allow new "defaultValue" to be provided when resetti…

…ng the… (#75302) (#75455)

src/plugins/es_ui_shared/public/forms/form_wizard/form_wizard_context.tsx

@@ -147,7 +147,7 @@ export const FormWizardProvider = WithMultiContent<Props<any>>(function FormWiza
  return nextState;
  });
  },
- [getStepIndex, validate, onSave, getData]
+ [getStepIndex, validate, onSave, getData, lastStep]
  );
 
  const value: Context = {

src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.test.tsx

@@ -98,7 +98,7 @@ describe('<UseField />', () => {
 
  useEffect(() => {
  onForm(form);
- }, [form]);
+ }, [onForm, form]);
 
  return (
  <Form form={form}>

src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.tsx

@@ -54,19 +54,24 @@ function UseFieldComp<T = unknown>(props: Props<T>) {
  const propsToForward =
  componentProps !== undefined ? { ...componentProps, ...rest } : { ...rest };
 
- const fieldConfig =
+ const fieldConfig: FieldConfig<any, T> & { initialValue?: T } =
  config !== undefined
  ? { ...config }
  : ({
  ...form.__readFieldConfigFromSchema(path),
  } as Partial<FieldConfig<any, T>>);
 
- if (defaultValue === undefined && readDefaultValueOnForm) {
- // Read the field default value from the "defaultValue" object passed to the form
- (fieldConfig.defaultValue as any) = form.getFieldDefaultValue(path) ?? fieldConfig.defaultValue;
- } else if (defaultValue !== undefined) {
- // Read the field default value from the propvided prop
- (fieldConfig.defaultValue as any) = defaultValue;
+ if (defaultValue !== undefined) {
+ // update the form "defaultValue" ref object so when/if we reset the form we can go back to this value
+ form.__updateDefaultValueAt(path, defaultValue);
+
+ // Use the defaultValue prop as initial value
+ fieldConfig.initialValue = defaultValue;
+ } else {
+ if (readDefaultValueOnForm) {
+ // Read the field initial value from the "defaultValue" object passed to the form
+ fieldConfig.initialValue = (form.getFieldDefaultValue(path) as T) ?? fieldConfig.defaultValue;
+ }
  }
 
  if (!fieldConfig.path) {

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_field.ts

@@ -25,12 +25,13 @@ import { FIELD_TYPES, VALIDATION_TYPES } from '../constants';
 export const useField = <T>(
  form: FormHook,
  path: string,
- config: FieldConfig<any, T> = {},
+ config: FieldConfig<any, T> & { initialValue?: T } = {},
  valueChangeListener?: (value: T) => void
 ) => {
  const {
  type = FIELD_TYPES.TEXT,
- defaultValue = '',
+ defaultValue = '', // The value to use a fallback mecanism when no initial value is passed
+ initialValue = config.defaultValue ?? '', // The value explicitly passed
  label = '',
  labelAppend = '',
  helpText = '',
@@ -44,14 +45,22 @@ export const useField = <T>(
 
  const { getFormData, __removeField, __updateFormDataAt, __validateFields } = form;
 
- const initialValue = useMemo(() => {
- if (typeof defaultValue === 'function') {
- return deserializer ? deserializer(defaultValue()) : defaultValue();
- }
- return deserializer ? deserializer(defaultValue) : defaultValue;
- }, [defaultValue, deserializer]) as T;
+ /**
+ * This callback is both used as the initial "value" state getter, **and** for when we reset the form
+ * (and thus reset the field value). When we reset the form, we can provide a new default value (which will be
+ * passed through this "initialValueGetter" handler).
+ */
+ const initialValueGetter = useCallback(
+ (updatedDefaultValue = initialValue) => {
+ if (typeof updatedDefaultValue === 'function') {
+ return deserializer ? deserializer(updatedDefaultValue()) : updatedDefaultValue();
+ }
+ return deserializer ? deserializer(updatedDefaultValue) : updatedDefaultValue;
+ },
+ [initialValue, deserializer]
+ );
 
- const [value, setStateValue] = useState<T>(initialValue);
+ const [value, setStateValue] = useState<T>(initialValueGetter);
  const [errors, setErrors] = useState<ValidationError[]>([]);
  const [isPristine, setPristine] = useState(true);
  const [isValidating, setValidating] = useState(false);
@@ -429,7 +438,7 @@ export const useField = <T>(
 
  const reset: FieldHook<T>['reset'] = useCallback(
  (resetOptions = { resetValue: true }) => {
- const { resetValue = true } = resetOptions;
+ const { resetValue = true, defaultValue: updatedDefaultValue } = resetOptions;
 
  setPristine(true);
  setValidating(false);
@@ -438,11 +447,12 @@ export const useField = <T>(
  setErrors([]);
 
  if (resetValue) {
- setValue(initialValue);
- return initialValue;
+ const newValue = initialValueGetter(updatedDefaultValue ?? defaultValue);
+ setValue(newValue);
+ return newValue;
  }
  },
- [setValue, serializeOutput, initialValue]
+ [setValue, initialValueGetter, defaultValue]
  );
 
  // -- EFFECTS

src/plugins/es_ui_shared/static/forms/hook_form_lib/hooks/use_form.test.tsx

@@ -33,7 +33,17 @@ interface Props {
  onData: FormSubmitHandler<MyForm>;
 }
 
+let formHook: FormHook<any> | null = null;
+
+const onFormHook = (_form: FormHook<any>) => {
+ formHook = _form;
+};
+
 describe('use_form() hook', () => {
+ beforeEach(() => {
+ formHook = null;
+ });
+
  describe('form.submit() & config.onSubmit()', () => {
  const onFormData = jest.fn();
 
@@ -125,12 +135,6 @@ describe('use_form() hook', () => {
  });
 
  test('should not build the object if the form is not valid', async () => {
- let formHook: FormHook<MyForm> | null = null;
-
- const onFormHook = (_form: FormHook<MyForm>) => {
- formHook = _form;
- };
-
  const TestComp = ({ onForm }: { onForm: (form: FormHook<MyForm>) => void }) => {
  const { form } = useForm<MyForm>({ defaultValue: { username: 'initialValue' } });
  const validator: ValidationFunc = ({ value }) => {
@@ -141,7 +145,7 @@ describe('use_form() hook', () => {
 
  useEffect(() => {
  onForm(form);
- }, [form]);
+ }, [onForm, form]);
 
  return (
  <Form form={form}>
@@ -297,4 +301,145 @@ describe('use_form() hook', () => {
  });
  });
  });
+
+ describe('form.reset()', () => {
+ const defaultValue = {
+ username: 'defaultValue',
+ deeply: { nested: { value: 'defaultValue' } },
+ };
+
+ type RestFormTest = typeof defaultValue;
+
+ const TestComp = ({ onForm }: { onForm: (form: FormHook<any>) => void }) => {
+ const { form } = useForm<RestFormTest>({
+ defaultValue,
+ options: { stripEmptyFields: false },
+ });
+
+ useEffect(() => {
+ onForm(form);
+ }, [onForm, form]);
+
+ return (
+ <Form form={form}>
+ <UseField
+ path="username"
+ config={{ defaultValue: 'configDefaultValue' }}
+ data-test-subj="userNameField"
+ />
+ <UseField
+ path="city"
+ config={{ defaultValue: 'configDefaultValue' }}
+ defaultValue="inlineDefaultValue"
+ data-test-subj="cityField"
+ />
+ <UseField path="deeply.nested.value" data-test-subj="deeplyNestedField" />
+ </Form>
+ );
+ };
+
+ const setup = registerTestBed(TestComp, {
+ defaultProps: { onForm: onFormHook },
+ memoryRouter: { wrapComponent: false },
+ });
+
+ test('should put back the defaultValue for each field', async () => {
+ const {
+ form: { setInputValue },
+ } = setup() as TestBed;
+
+ if (!formHook) {
+ throw new Error(
+ `formHook is not defined. Use the onForm() prop to update the reference to the form hook.`
+ );
+ }
+
+ let formData: Partial<RestFormTest> = {};
+
+ await act(async () => {
+ formData = formHook!.getFormData();
+ });
+ expect(formData).toEqual({
+ username: 'defaultValue',
+ city: 'inlineDefaultValue',
+ deeply: { nested: { value: 'defaultValue' } },
+ });
+
+ setInputValue('userNameField', 'changedValue');
+ setInputValue('cityField', 'changedValue');
+ setInputValue('deeplyNestedField', 'changedValue');
+
+ await act(async () => {
+ formData = formHook!.getFormData();
+ });
+ expect(formData).toEqual({
+ username: 'changedValue',
+ city: 'changedValue',
+ deeply: { nested: { value: 'changedValue' } },
+ });
+
+ await act(async () => {
+ formHook!.reset();
+ });
+
+ await act(async () => {
+ formData = formHook!.getFormData();
+ });
+ expect(formData).toEqual({
+ username: 'defaultValue',
+ city: 'inlineDefaultValue', // Inline default value is correctly kept after resetting
+ deeply: { nested: { value: 'defaultValue' } },
+ });
+ });
+
+ test('should allow to pass a new "defaultValue" object for the fields', async () => {
+ const {
+ form: { setInputValue },
+ } = setup() as TestBed;
+
+ if (!formHook) {
+ throw new Error(
+ `formHook is not defined. Use the onForm() prop to update the reference to the form hook.`
+ );
+ }
+
+ setInputValue('userNameField', 'changedValue');
+ setInputValue('cityField', 'changedValue');
+ setInputValue('deeplyNestedField', 'changedValue');
+
+ let formData: Partial<RestFormTest> = {};
+
+ await act(async () => {
+ formHook!.reset({
+ defaultValue: {
+ city: () => 'newDefaultValue', // A function can also be passed
+ deeply: { nested: { value: 'newDefaultValue' } },
+ },
+ });
+ });
+ await act(async () => {
+ formData = formHook!.getFormData();
+ });
+ expect(formData).toEqual({
+ username: 'configDefaultValue', // Back to the config defaultValue as no value was provided when resetting
+ city: 'newDefaultValue',
+ deeply: { nested: { value: 'newDefaultValue' } },
+ });
+
+ // Make sure all field are back to the config defautlValue, even when we have a UseField with inline prop "defaultValue"
+ await act(async () => {
+ formHook!.reset({
+ defaultValue: {},
+ });
+ });
+ await act(async () => {
+ formData = formHook!.getFormData();
+ });
+ expect(formData).toEqual({
+ username: 'configDefaultValue',
+ city: 'configDefaultValue', // Inline default value **is not** kept after resetting with undefined "city" value
+ deeply: { nested: { value: '' } }, // Fallback to empty string as no config was provided
+ });
+ });
+ });
 });