diff --git a/packages/grafana-ui/src/components/Forms/Form.story.tsx b/packages/grafana-ui/src/components/Forms/Form.story.tsx
index 424c2f84542..92262eb991d 100644
--- a/packages/grafana-ui/src/components/Forms/Form.story.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.story.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { Legend } from './Legend';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -122,17 +122,39 @@ export const basic = () => {
};
export const defaultValues = () => {
+ const defaultValues = [
+ {
+ name: 'Roger Waters',
+ nested: {
+ path: 'Nested path default value',
+ },
+ radio: 'option2',
+ select: 'option1',
+ switch: true,
+ },
+ {
+ name: 'John Waters',
+ nested: {
+ path: 'Nested path default value updated',
+ },
+ radio: 'option1',
+ select: 'option2',
+ switch: false,
+ },
+ ];
+ const [defaultsIdx, setDefaultsIdx] = useState(0);
+
return (
<>
- {renderForm({
- name: 'Roger Waters',
- nested: {
- path: 'Nested path default value',
- },
- radio: 'option2',
- select: 'option1',
- switch: true,
- })}
+ {renderForm(defaultValues[defaultsIdx])}
+
>
);
};
diff --git a/packages/grafana-ui/src/components/Forms/Form.tsx b/packages/grafana-ui/src/components/Forms/Form.tsx
index 9e934b6015f..8ef3d526e6f 100644
--- a/packages/grafana-ui/src/components/Forms/Form.tsx
+++ b/packages/grafana-ui/src/components/Forms/Form.tsx
@@ -2,7 +2,7 @@
* This is a stub implementation only for correct styles to be applied
*/
-import React from 'react';
+import React, { useEffect } from 'react';
import { useForm, Mode, OnSubmit, DeepPartial, FormContextValues } from 'react-hook-form';
import { GrafanaTheme } from '@grafana/data';
import { css } from 'emotion';
@@ -27,10 +27,17 @@ interface FormProps {
export function Form({ validateOn, defaultValues, onSubmit, children }: FormProps) {
const theme = useTheme();
- const { handleSubmit, register, errors, control } = useForm({
+ const { handleSubmit, register, errors, control, reset, getValues } = useForm({
mode: validateOn || 'onSubmit',
- defaultValues,
+ defaultValues: {
+ ...defaultValues,
+ },
});
+
+ useEffect(() => {
+ reset({ ...getValues(), ...defaultValues });
+ }, [defaultValues]);
+
const styles = getFormStyles(theme);
return (