diff --git a/cypress/integration/edit.js b/cypress/integration/edit.js index b91edfb2862..d23df5aefa9 100644 --- a/cypress/integration/edit.js +++ b/cypress/integration/edit.js @@ -256,4 +256,23 @@ describe('Edit Page', () => { .eq(2) .should(el => expect(el).to.contain('Sed quo et et fugiat modi')); }); + + it('should not display a warning about unsaved changes when an array input has been updated', () => { + ListPagePosts.navigate(); + ListPagePosts.nextPage(); // Ensure the record is visible in the table + + EditPostPage.navigate(); + // Select first notification input checkbox + cy.get( + EditPostPage.elements.input('notifications', 'checkbox-group-input') + ) + .eq(0) + .click(); + + EditPostPage.submit(); + + // If the update succeeded without display a warning about unsaved changes, + // we should have been redirected to the list + cy.url().then(url => expect(url).to.contain('/#/posts')); + }); }); diff --git a/cypress/support/EditPage.js b/cypress/support/EditPage.js index 21700c8bdd1..4a9314028fc 100644 --- a/cypress/support/EditPage.js +++ b/cypress/support/EditPage.js @@ -6,6 +6,9 @@ export default url => ({ if (type === 'rich-text-input') { return `.ra-input-${name} .ql-editor`; } + if (type === 'checkbox-group-input') { + return `.ra-input-${name} label`; + } if (type === 'reference-array-input') { return `.ra-input div[role=combobox]`; } diff --git a/packages/ra-core/src/form/useInitializeFormWithRecord.ts b/packages/ra-core/src/form/useInitializeFormWithRecord.ts index 4138d4c7382..6084cfb5562 100644 --- a/packages/ra-core/src/form/useInitializeFormWithRecord.ts +++ b/packages/ra-core/src/form/useInitializeFormWithRecord.ts @@ -15,7 +15,14 @@ const useInitializeFormWithRecord = record => { const initialValues = form.getState().initialValues; const initialValuesMergedWithRecord = merge({}, initialValues, record); - form.initialize(initialValuesMergedWithRecord); + + // Disable this option when re-initializing the form because in this case, it should reset the dirty state of all fields + // We do need to keep this option for dynamically added inputs though which is why it is kept at the form level + form.setConfig('keepDirtyOnReinitialize', false); + // Ignored until next version of final-form is released. See https://github.com/final-form/final-form/pull/376 + // @ts-ignore + form.restart(initialValuesMergedWithRecord); + form.setConfig('keepDirtyOnReinitialize', true); }, [form, JSON.stringify(record)]); // eslint-disable-line react-hooks/exhaustive-deps };