Skip to content

Commit c03e9c1

Browse files
fix(ui): properly differentiate between DOM events and raw values in setValue (#12892)
Because of this check, if a JSON with a property `target` was saved it would become malformed. For example trying to save a JSON field: ```json { "target": { "value": { "foo": "bar" } } } ``` would result in: ```json { "foo": "bar" } ``` And trying to save: ```json { "target": "foo" } ``` would just not save anything: ```json null ``` I went through all of the field types and did not find a single one that would rely on this ternary. Seems like it always defaulted to `const val = e`, except the unexpected case described previously. Fixes #12873 Added test may be overkill, will remove if so. --- - To see the specific tasks where the Asana app for GitHub is being used, see below: - https://app.asana.com/0/0/1210628466702813 --------- Co-authored-by: Jacob Fletcher <jacobsfletch@gmail.com>
1 parent b74969d commit c03e9c1

File tree

2 files changed

+26
-1
lines changed

2 files changed

+26
-1
lines changed

packages/ui/src/forms/useField/index.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,17 @@ export const useField = <TValue,>(options?: Options): FieldType<TValue> => {
7777
// update field values from field component(s)
7878
const setValue = useCallback(
7979
(e, disableModifyingForm = false) => {
80-
const val = e && e.target ? e.target.value : e
80+
// TODO:
81+
// There are no built-in fields that pass events into `e`.
82+
// Remove this check in the next major version.
83+
const isEvent =
84+
e &&
85+
typeof e === 'object' &&
86+
typeof e.preventDefault === 'function' &&
87+
typeof e.stopPropagation === 'function'
88+
89+
const val = isEvent ? e.target.value : e
90+
8191
dispatchField({
8292
type: 'UPDATE',
8393
disableFormData: disableFormData || (hasRows && val > 0),

test/fields/collections/JSON/e2e.spec.ts

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,21 @@ describe('JSON', () => {
102102
)
103103
})
104104

105+
test('should save field with "target" property', async () => {
106+
const input = '{"target": "foo"}'
107+
await page.goto(url.create)
108+
const jsonCodeEditor = page.locator('.json-field .code-editor').first()
109+
await expect(() => expect(jsonCodeEditor).toBeVisible()).toPass({
110+
timeout: POLL_TOPASS_TIMEOUT,
111+
})
112+
const jsonFieldInputArea = page.locator('.json-field .inputarea').first()
113+
await jsonFieldInputArea.fill(input)
114+
115+
await saveDocAndAssert(page)
116+
const jsonField = page.locator('.json-field').first()
117+
await expect(jsonField).toContainText('"target": "foo"')
118+
})
119+
105120
test('should update', async () => {
106121
const createdDoc = await payload.create({
107122
collection: 'json-fields',

0 commit comments

Comments
 (0)