fix: prevent json data getting reset when switching tabs (#4123)

packages/payload/src/admin/components/forms/field-types/JSON/index.tsx

@@ -9,8 +9,8 @@ import FieldDescription from '../../FieldDescription'
 import DefaultLabel from '../../Label'
 import useField from '../../useField'
 import withCondition from '../../withCondition'
-import './index.scss'
 import { fieldBaseClass } from '../shared'
+import './index.scss'
 
 const baseClass = 'json-field'
 
@@ -19,13 +19,13 @@ const JSONField: React.FC<Props> = (props) => {
     name,
     admin: {
       className,
+      components: { Error, Label } = {},
       condition,
       description,
       editorOptions,
       readOnly,
       style,
       width,
-      components: { Error, Label } = {},
     } = {},
     label,
     path: pathFromProps,
@@ -69,8 +69,8 @@ const JSONField: React.FC<Props> = (props) => {
   )
 
   useEffect(() => {
-    setStringValue(JSON.stringify(initialValue, null, 2))
-  }, [initialValue])
+    setStringValue(JSON.stringify(value ? value : initialValue, null, 2))
+  }, [initialValue, value])
 
   return (
     <div

test/fields/collections/Tabs/index.ts

@@ -106,6 +106,10 @@ const TabsFields: CollectionConfig = {
                 },
               ],
             },
+            {
+              name: 'json',
+              type: 'json',
+            },
           ],
         },
         {

test/fields/e2e.spec.ts

@@ -805,12 +805,14 @@ describe('fields', () => {
     test('should fill and retain a new value within a tab while switching tabs', async () => {
       const textInRowValue = 'hello'
       const numberInRowValue = '23'
+      const jsonValue = '{ "foo": "bar"}'
 
       await page.goto(url.create)
 
       await page.locator('.tabs-field__tab-button:has-text("Tab with Row")').click()
       await page.locator('#field-textInRow').fill(textInRowValue)
       await page.locator('#field-numberInRow').fill(numberInRowValue)
+      await page.locator('.json-field .inputarea').fill(jsonValue)
 
       await wait(300)
 
@@ -821,16 +823,19 @@ describe('fields', () => {
 
       await expect(page.locator('#field-textInRow')).toHaveValue(textInRowValue)
       await expect(page.locator('#field-numberInRow')).toHaveValue(numberInRowValue)
+      await expect(page.locator('.json-field .lines-content')).toContainText(jsonValue)
     })
 
     test('should retain updated values within tabs while switching between tabs', async () => {
       const textInRowValue = 'new value'
+      const jsonValue = '{ "new": "value"}'
       await page.goto(url.list)
       await page.locator('.cell-id a').click()
 
       // Go to Row tab, update the value
       await page.locator('.tabs-field__tab-button:has-text("Tab with Row")').click()
       await page.locator('#field-textInRow').fill(textInRowValue)
+      await page.locator('.json-field .inputarea').fill(jsonValue)
 
       await wait(250)
 
@@ -839,6 +844,7 @@ describe('fields', () => {
       await page.locator('.tabs-field__tab-button:has-text("Tab with Row")').click()
 
       await expect(page.locator('#field-textInRow')).toHaveValue(textInRowValue)
+      await expect(page.locator('.json-field .lines-content')).toContainText(jsonValue)
 
       // Go to array tab, save the doc
       await page.locator('.tabs-field__tab-button:has-text("Tab with Array")').click()