[Form lib] Reset the form whenever its "defaultValue" changes

[sebelga]

We have seen in several places the benefit of being able to change the defaultValue passed to the useForm and automatically trigger a form.reset() for the consumer.

This would allow the following data flow

const [formDefaultValue, setFormDefaultValue] = useState(someInitialDefaultValue);
const { form } = useForm({ defaultValue: formDefaultValue });

const onTypeChange = (type: string) => {
  // Whenever the processor type changes, update the default value of the form
  // that will reset the form
  setFormDefaultValue(() => {
	if (type === someInitialDefaultValue?.type) {
      return someInitialDefaultValue;
    }
    // Only return the "type", the rest of the field will read the defautValue from their config.
    return { type };
  });
};

// JSX
<UseField path="type" onChange={onTypeChange} /> 

[elasticmachine]

Pinging @elastic/es-ui (Team:Elasticsearch UI)

[sebelga]

After discussing it with @jloleysens, we decided to make it more explicit for the consumer when he wants to reset the form, and give him the possibility to provide a new defaultValue object if required.

I was worried that, with the above solution, we would be in a middle ground between a "controlled" and and "uncontrolled" component. If we automatically reset the form and update the fields value each time the defaultValue changes, then it would be a controlled component. In that case it should not be defaultValue but value. But this is not what we want as the form will never be controlled in a practical sense.

So instead of relying on the above solution, I will add a property to the form.reset() handler to pas a new defaultValue object.

const onSomeCallback = () => {
  form.reset({ defaultValue: { another: 'object' } })
};