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 (