fix: JSON formatting not working after keepValues change

Author: ytkimirti

src/components/databrowser/components/display/display-simple.tsx

@@ -45,9 +45,6 @@ const EditorDisplayForm = ({
   const form = useForm({
     defaultValues: { value: data },
   })
-  const { editor, selector } = useField({ name: "value", form })
-
-  const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type)
 
   // Updates default values after submit
   useEffect(() => {
@@ -59,6 +56,10 @@ const EditorDisplayForm = ({
     )
   }, [data])
 
+  const { editor, selector } = useField({ name: "value", form, data })
+
+  const { mutateAsync: setKey, isPending: isSettingKey } = useSetSimpleKey(dataKey, type)
+
   const handleCancel = () => {
     form.reset()
   }

src/components/databrowser/components/display/input/use-field.tsx

@@ -10,12 +10,14 @@ export const useField = ({
   height,
   showCopyButton,
   readOnly,
+  data,
 }: {
   name: string
   form: UseFormReturn<any>
   height?: number
   showCopyButton?: boolean
   readOnly?: boolean
+  data?: string
 }) => {
   const { field, fieldState } = useController<Record<string, string>>({
     name,
@@ -26,7 +28,7 @@ export const useField = ({
     checkIsValidJSON(field.value) ? "JSON" : "Text"
   )
 
-  // Attempt to format JSON on initial load
+  // Attempt to format JSON everytime the underlying data changes
   useEffect(() => {
     if (!checkIsValidJSON(field.value)) {
       return
@@ -35,7 +37,7 @@ export const useField = ({
     form.setValue(name, formatJSON(field.value), {
       shouldDirty: false,
     })
-  }, [])
+  }, [data])
 
   const handleTypeChange = (type: ContentType) => {
     setContentType(type)