It appears that there’s no straightforward way to reset the Editable component. So, when the user’s input returns an error, the input remains displayed. This is undesired, as we’d like to restore the previously displayed value.
Setting the Editable‘s value prop obviously blocks editing.
The issue has also been described here: GitHub link
One (hackish) approach would be to alter Editable‘s key prop using useState, thus forcing a re-render of the Editable component (with the previous value, passed to the defaultValue prop).
At the top of the component:
const [editableKey, setEditableKey] = useState(0);
In onSubmit, after validation: setEditableKey((prevKey) => prevKey + 1);
The Editable component:
<Editable
key={editableKey}
...