JSON field behaving erratically, making it almost impossible to enter data properly

[CherryDT]

Link to reproduction

No response

Describe the Bug

I have a simple JSON field. I'm trying to enter an array of strings. It's almost impossible to do.

Entering [ shows [] for a split-second and then vanishes again. Trying to enter a new line within a {} doesn't work either, it reset to {} on the same line.

When I first create {["something"]} and then delete the {}, I do get an array. But then adding new entries is again almost impossible, with the cursor jumping to the end of the field every time I enter a character.

I also tried setting editorOptions: { formatOnPaste: false, formatOnType: false } but it didn't change anything.

To Reproduce

Create a JSON field. Try to enter an array.

Payload Version

2.14.2

Adapters and Plugins

db-mongodb, bundler-webpack

[jmikrut]

Thanks for reporting! @kendelljoseph something probably changed with our recent work on the json field. let’s look into it

[wrobson-lllow]

I have been experiencing the same issues.

I opened a similar (or nearly identical) issue last fall (2023) that was resolved in a subsequent release. However, I noticed the same issue happening again a week or so ago (around May 30, 2024). Our application is currently on v2.18.3

[wrobson-lllow]

Here is a link to the now closed issue I opened last December v2.3.0: https://github.com/payloadcms/payload/issues/4403

[kendelljoseph]

Hi @wrobson-lllow . I'm working on this today.

It looks like an problem with the way the Monaco editor is refreshing when data is updated. I'll try to replicate the behavior now.

[kendelljoseph]

• I was able to replicate the behavior locally.

This field should accept a valid JSON object, array, or literal, however the field visual data is indeed fluttering if you try using an array from a empty state.

~

I'm still investigating...

[kendelljoseph]

• Using a default value populates the field properly. However the problem returns once the default value is deleted.

~

I'm looking for any interference between using jsonSchemas and this issue as well.

~

... still working on this.

[wrobson-lllow]

I see that this issue is still open, so this Pull Request maybe unrelated. I just updated to v2.22.0 and I am still having an issue. Thanks for taking a look at this @kendelljoseph it is much appreciated!

In our application we give all JSON fields a default value of an empty object.

https://github.com/payloadcms/payload/assets/132296416/984857e3-c3a3-47b8-a8c4-3ca91ee0f00b

[sideral]

I'm having this issue with v2.26.0 . One workaround that worked for me is to use a code field with language: "json". It's not strictly the same since, this won't save the json object to the db but just a string, but at least it makes it usable.

[wrobson-lllow]

@sideral Am I correct that a code field saves a normal string to the DB not a JSON string? If that's the case I don't think that will work for my use case.