Bug report: mismatch between displayed value and internal state

[moykeen]

Describe the bug
A clear and concise description of what the bug is (and how to reproduce it, if relevant)

When the user unfocuses the editor component without clicking either 'OK' or 'Cancel', the displayed value remains as entered, but the internal state is not updated.

Based on my understanding of the code, the InputButtons component should trigger either onOK or onCancel when it is about to be unmounted in order to resolve this issue.

json-edit-react/src/ButtonPanels.tsx

Line 198 in 31f0243

export const InputButtons: React.FC<{

Expected behavior

Screenshots

Online demo
Please try and reproduce problem using a fork of this sandbox, and post the link here. If you can't reproduce the problem there, it's likely to be due to something outside of the component itself.

[CarlosNZ]

Hi there, when you say "unfocuses the editor component", what exactly do you mean? If you focus somewhere else on the page, the "editing" state of the editor persists, no internal state is updated, like so:

The only ways to update the internal state are:

• Click the green "Check" icon
• Hit the "confirmation" key (usually "Enter")
• "Tab" to the next entry (must be focused and click "Tab" key)

And to "cancel" (i.e. exit "editing" state but not update value), you either click "Cancel" icon or press Escape)

When else would you expect it to be updated?

[moykeen]

Thank you! Here is a demonstration:
https://codesandbox.io/p/sandbox/json-edit-react-demo-forked-563k82

Initially, the data and displayed values were consistent.

I edited dog to fox in data1. At this point, the data was not updated, but that’s okay because the editor component for data1 still had focus. (I understand that updates are not immediate.)

However, a discrepancy occurred when I started editing data2 without pressing the green check icon or the Enter key for data1.

Since the editor component can lose focus in this way, the edited values should be explicitly committed or reverted.

[CarlosNZ]

Ah, I see you're using a pretty old version of the component!

Please upgrade to the latest (v1.22.0) and you won't have this problem any more:

[moykeen]

Ah, I see! That makes sense. I actually forked the CodeSandbox from the issue template, and it seems the version specified there is quite old. I didn’t realize it was outdated.

[CarlosNZ]

Ah, I see! That makes sense. I actually forked the CodeSandbox from the issue template, and it seems the version specified there is quite old. I didn’t realize it was outdated.

Oh, good to know. Thanks, I'll update that too. Cheers 👍🏼