fix(form-plugin): reset form on changed document

equinor · May 30, 2024 · eb67a3c · eb67a3c
1 parent 9151109
commit eb67a3c
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 12 deletions.
diff --git 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<any>(props.idReference, 0)
+  const { document, isLoading, updateDocument, error } = useDocument<any>(
+    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 <Loading />
+  if (isLoading) return <Loading />
 
   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
@@ -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
@@ -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 ?? ''}
           />
         </EdsProvider>
       </div>

diff --git 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) => {
       <TextField
         id={props.id}
         readOnly={props.readOnly}
-        defaultValue={props.value}
+        value={props.value}
         inputRef={props.inputRef}
         variant={props.variant}
         helperText={props.helperText}

diff --git a/packages/dm-core-plugins/src/form/widgets/SwitchWidget.tsx b/packages/dm-core-plugins/src/form/widgets/SwitchWidget.tsx
@@ -8,7 +8,7 @@ const SwitchWidget = (props: TWidget) => {
     <Switch
       {...props}
       disabled={readOnly}
-      defaultChecked={typeof value === 'undefined' ? false : value}
+      checked={typeof value === 'undefined' ? false : value}
       data-testid='form-switch'
     />
   )

diff --git 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 (
     <StyledEDSField
       {...restProps}
-      defaultValue={
+      value={
         props.readOnly && props.value === ''
           ? '-'
           : props.defaultValue ?? props.value
@@ -99,7 +99,7 @@ export const StyledNumberField = (
       onWheel={(event: React.UIEvent<HTMLInputElement>) =>
         (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
@@ -118,8 +118,8 @@ export function useDocument<T>(
             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<T>(
     updateDocument: (newDocument: T, notify, partialUpdate, throwError) =>
       mutation.mutateAsync({ newDocument, notify, partialUpdate, throwError }),
     error: errorResponse,
-    setError: setErrorResponse
+    setError: setErrorResponse,
   }
 }