From 1dcd3a27825ed9d276b997a66f84bb2c05e87955 Mon Sep 17 00:00:00 2001
From: Jessica Chowdhury <67977755+JessChowdhury@users.noreply.github.com>
Date: Mon, 27 Nov 2023 17:23:20 +0000
Subject: [PATCH] fix: prevent json data getting reset when switching tabs
 (#4123)

---
 .../src/admin/components/forms/field-types/JSON/index.tsx | 8 ++++----
 test/fields/collections/Tabs/index.ts                     | 4 ++++
 test/fields/e2e.spec.ts                                   | 6 ++++++
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx b/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx
index 198b6ce24c..3e1c5697d6 100644
--- a/packages/payload/src/admin/components/forms/field-types/JSON/index.tsx
+++ b/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
diff --git a/test/fields/collections/Tabs/index.ts b/test/fields/collections/Tabs/index.ts
index e49b0a0f9f..e6003d0a56 100644
--- a/test/fields/collections/Tabs/index.ts
+++ b/test/fields/collections/Tabs/index.ts
@@ -106,6 +106,10 @@ const TabsFields: CollectionConfig = {
                 },
               ],
             },
+            {
+              name: 'json',
+              type: 'json',
+            },
           ],
         },
         {
diff --git a/test/fields/e2e.spec.ts b/test/fields/e2e.spec.ts
index 5bfece48d1..ec13cbe028 100644
--- a/test/fields/e2e.spec.ts
+++ b/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()