Issue with JSON Editor: Invalid Input Retains Old Value

💬 App Building
1

I'm building a form in Retool that includes a few JSON editor fields. Since the editor expects a specific structure (like an object, a list of objects, or values of type string or number), I've been relying on the "valid" property to check whether the input is correct.

On valid input, everything works fine. For example, if I enter [{"key":"value"}], the editor returns valid = true and the correct value.

But here's the issue: if the next input is invalid — for example, just a plain string like "invalid_data" — then the "valid" property becomes false, which is expected. However, the "value" property still returns the last valid value (in this case, [{"key":"value"}]).

This creates a problem because while I know the input is invalid, I can't access what the user actually typed. There's no way to retrieve the raw invalid input, which makes it impossible to provide feedback or try to correct the data through scripts.

Is there a way to access the raw input when it's invalid? Or is this a known limitation of the JSON editor?

Also, side note: it would be great if users could resize the JSON editor at runtime. Right now, it's fixed in size once the app is published, which can make it harder to work with large or nested JSON.

Thanks!

2

Hey Hermal!
Have you tried creating variables and setting them whenever the input changes? So that maybe you can create two variables such as "validJson" and "invalidJsonValue", and get the data from there.
Keep me posted and please mark this as a solution if it resolved your problem!

3

I have not tried the way you mentioned but that would require assigning values to variable and carefully setting them null before next using it again.

I would expect a form to pass the data which user entered ignoring the fact it is wrong format or something else rather than fetching values from last submission call.

Additionally i did clear and reset form fields at each submission still its fetching old values i don't understand why.

4

Hello @Hemal_Patel,

Apologies for the issue.

Can you share with me how you set up editor to expect a specific structure? I am looking to reproduce this to confirm the bug.

On invalid data, the form should reset the inputs, then when you enter in a plain string like "invalid_data" it should properly update the the component's value to the new invalid string and not continue to return the previously valid [{"key":"value"}]

5

@Jack_T Here is what happening:

Step 1 – With valid JSON:

  • You create a form with a JSON Editor field (let’s say jsoneditorFieldIdentifier).
  • On form submission, you run a script that logs:
    • jsoneditorFieldIdentifier.value
    • jsoneditorFieldIdentifier.valid
  • You enter valid JSON, hit submit — and everything works fine:
    • valid = true
    • value contains the exact JSON you entered.

Step 2 – With invalid JSON:

  • Now enter invalid JSON in the same field and submit the form.
  • What happens:
    • valid = false — which is correct.
    • But value still contains the previous (valid) JSON from Step 1.
    • The new (invalid) input isn't accessible — even if you want to sanitize or fix it manually, you can’t fetch the actual bad input.
1 Like
6

Thank you so much for the added details!

I was able to reproduce this. Going to file a bug report right now, apologies for the inconvenience.

I will update this thread with any news I hear from the engineering team.

1 Like