From 3c27175c31140aaf9f840fff0cfce64728e35366 Mon Sep 17 00:00:00 2001 From: Stig Ofstad Date: Thu, 30 May 2024 12:42:16 +0200 Subject: [PATCH] fix(form-plugin): reset form on changed document --- packages/dm-core-plugins/src/form/FormPlugin.tsx | 8 +++++--- packages/dm-core-plugins/src/form/components/Form.tsx | 8 +++++++- .../src/form/widgets/DimensionalScalarWidget.tsx | 2 +- .../src/form/widgets/EntityPickerWidget.tsx | 2 +- .../dm-core-plugins/src/form/widgets/SwitchWidget.tsx | 2 +- .../src/form/widgets/common/StyledInputFields.tsx | 4 ++-- packages/dm-core/src/hooks/useDocument.tsx | 8 ++++---- 7 files changed, 21 insertions(+), 13 deletions(-) diff --git a/packages/dm-core-plugins/src/form/FormPlugin.tsx b/packages/dm-core-plugins/src/form/FormPlugin.tsx index f040e449e..f40291e32 100644 --- a/packages/dm-core-plugins/src/form/FormPlugin.tsx +++ b/packages/dm-core-plugins/src/form/FormPlugin.tsx @@ -7,12 +7,14 @@ import { import { Form } from './components/Form' export const FormPlugin = (props: IUIPlugin) => { - const { document, isLoading, updateDocument, error, isFetching } = - useDocument(props.idReference, 0) + const { document, isLoading, updateDocument, error } = useDocument( + props.idReference, + 0 + ) // react-hook-form is unable to rerender when the document is updated. // This means that the form will not benefit from react-query caching. - if (isLoading || isFetching) return + if (isLoading) return if (error) throw new Error(JSON.stringify(error, null, 2)) diff --git a/packages/dm-core-plugins/src/form/components/Form.tsx b/packages/dm-core-plugins/src/form/components/Form.tsx index 076ae46a0..ab0007bb1 100644 --- a/packages/dm-core-plugins/src/form/components/Form.tsx +++ b/packages/dm-core-plugins/src/form/components/Form.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useEffect, useState } from 'react' import { EBlueprint, @@ -49,6 +49,12 @@ export const Form = (props: TFormProps) => { defaultValues: formData || {}, }) + useEffect(() => { + if (formData) { + rootMethods.reset(formData, { keepDefaultValues: false }) + } + }, [formData]) + const childMethods = useFormContext() const methods = showSubmitButton ? rootMethods : childMethods diff --git a/packages/dm-core-plugins/src/form/widgets/DimensionalScalarWidget.tsx b/packages/dm-core-plugins/src/form/widgets/DimensionalScalarWidget.tsx index a35d1dff9..cb52c74f2 100644 --- a/packages/dm-core-plugins/src/form/widgets/DimensionalScalarWidget.tsx +++ b/packages/dm-core-plugins/src/form/widgets/DimensionalScalarWidget.tsx @@ -88,7 +88,7 @@ const DimensionalScalarWidget = (props: TWidget) => { helperText={error} variant={error ? 'error' : undefined} onChange={onChangeHandler} - defaultValue={isPrimitive ? entity : entity?.value ?? ''} + value={isPrimitive ? entity : entity?.value ?? ''} /> diff --git a/packages/dm-core-plugins/src/form/widgets/EntityPickerWidget.tsx b/packages/dm-core-plugins/src/form/widgets/EntityPickerWidget.tsx index 4cb3fe175..1abd1445c 100644 --- a/packages/dm-core-plugins/src/form/widgets/EntityPickerWidget.tsx +++ b/packages/dm-core-plugins/src/form/widgets/EntityPickerWidget.tsx @@ -27,7 +27,7 @@ const EntityPickerWidget = (props: TWidget) => { { ) diff --git a/packages/dm-core-plugins/src/form/widgets/common/StyledInputFields.tsx b/packages/dm-core-plugins/src/form/widgets/common/StyledInputFields.tsx index b45e926de..fa71f515c 100644 --- a/packages/dm-core-plugins/src/form/widgets/common/StyledInputFields.tsx +++ b/packages/dm-core-plugins/src/form/widgets/common/StyledInputFields.tsx @@ -65,7 +65,7 @@ export const StyledTextField = ( return ( ) => (event.target as HTMLInputElement).blur() } - defaultValue={value ?? props.defaultValue} + value={value ?? props.defaultValue} type={'number'} /> ) diff --git a/packages/dm-core/src/hooks/useDocument.tsx b/packages/dm-core/src/hooks/useDocument.tsx index 2206e09e3..8bcc50e1a 100644 --- a/packages/dm-core/src/hooks/useDocument.tsx +++ b/packages/dm-core/src/hooks/useDocument.tsx @@ -66,7 +66,7 @@ export function useDocument( const { isPending, data } = useQuery({ staleTime: 5 * 1000, - refetchOnMount: false, + refetchOnMount: true, queryKey: queryKeys, queryFn: () => dmssAPI @@ -118,8 +118,8 @@ export function useDocument( error.response?.data || { message: error.name, data: error } ) if (throwError) { - throw new Error(JSON.stringify(error, null, 2)) - } + throw new Error(JSON.stringify(error, null, 2)) + } }), }) @@ -129,6 +129,6 @@ export function useDocument( updateDocument: (newDocument: T, notify, partialUpdate, throwError) => mutation.mutateAsync({ newDocument, notify, partialUpdate, throwError }), error: errorResponse, - setError: setErrorResponse + setError: setErrorResponse, } }