From 3e56efe8caec8ab297dea9c3ccb8c293b5ff5309 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Fri, 20 Sep 2019 11:50:19 +0200 Subject: [PATCH 1/2] Fix Form Become Dirty After Record Initialization --- .../ra-core/src/form/useInitializeFormWithRecord.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/ra-core/src/form/useInitializeFormWithRecord.ts b/packages/ra-core/src/form/useInitializeFormWithRecord.ts index 2dabc249777..5207b621301 100644 --- a/packages/ra-core/src/form/useInitializeFormWithRecord.ts +++ b/packages/ra-core/src/form/useInitializeFormWithRecord.ts @@ -9,14 +9,21 @@ const useInitializeFormWithRecord = (form, record) => { return; } + const registeredFields = form.getRegisteredFields(); + // react-final-form does not provide a way to set multiple values in one call. // Using batch ensure we don't get rerenders until all our values are set form.batch(() => { Object.keys(record).forEach(key => { - form.change(key, record[key]); + // We have to check the record key is actually registered as a field + // as some of record keys may not have a matching input + if (registeredFields.some(field => field === key)) { + form.change(key, record[key]); + form.resetFieldState(key); + } }); }); - }, []); // eslint-disable-line + }, [form, record]); }; export default useInitializeFormWithRecord; From 7ecbc8adba9201341b749816cc1bd3848c3a1eb9 Mon Sep 17 00:00:00 2001 From: Gildas Garcia Date: Fri, 20 Sep 2019 14:33:23 +0200 Subject: [PATCH 2/2] Fix tests --- packages/ra-core/src/form/useInitializeFormWithRecord.ts | 7 +++++-- packages/ra-ui-materialui/src/form/SimpleForm.js | 2 +- packages/ra-ui-materialui/src/form/TabbedForm.js | 2 +- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/ra-core/src/form/useInitializeFormWithRecord.ts b/packages/ra-core/src/form/useInitializeFormWithRecord.ts index 5207b621301..77a4828fafb 100644 --- a/packages/ra-core/src/form/useInitializeFormWithRecord.ts +++ b/packages/ra-core/src/form/useInitializeFormWithRecord.ts @@ -1,9 +1,12 @@ import { useEffect } from 'react'; +import { useForm } from 'react-final-form'; /** * Restore the record values which should override any default values specified on the form. */ -const useInitializeFormWithRecord = (form, record) => { +const useInitializeFormWithRecord = record => { + const form = useForm(); + useEffect(() => { if (!record) { return; @@ -16,7 +19,7 @@ const useInitializeFormWithRecord = (form, record) => { form.batch(() => { Object.keys(record).forEach(key => { // We have to check the record key is actually registered as a field - // as some of record keys may not have a matching input + // as some record keys may not have a matching input if (registeredFields.some(field => field === key)) { form.change(key, record[key]); form.resetFieldState(key); diff --git a/packages/ra-ui-materialui/src/form/SimpleForm.js b/packages/ra-ui-materialui/src/form/SimpleForm.js index 59ffdd77f9b..326a31daaa6 100644 --- a/packages/ra-ui-materialui/src/form/SimpleForm.js +++ b/packages/ra-ui-materialui/src/form/SimpleForm.js @@ -85,7 +85,7 @@ const SimpleFormView = ({ margin, ...rest }) => { - useInitializeFormWithRecord(form, record); + useInitializeFormWithRecord(record); const handleSubmitWithRedirect = useCallback( (redirect = defaultRedirect) => { diff --git a/packages/ra-ui-materialui/src/form/TabbedForm.js b/packages/ra-ui-materialui/src/form/TabbedForm.js index 7e73435dce7..f782162d3a3 100644 --- a/packages/ra-ui-materialui/src/form/TabbedForm.js +++ b/packages/ra-ui-materialui/src/form/TabbedForm.js @@ -104,7 +104,7 @@ export const TabbedFormView = ({ margin, ...rest }) => { - useInitializeFormWithRecord(form, record); + useInitializeFormWithRecord(record); const handleSubmitWithRedirect = useCallback( (redirect = defaultRedirect) => {