EditDialog Goes Back Too Far In Stack on Enter Click
thomasdax98 opened this issue · comments
If an EditDialog is in a stack and contains a form, submitting with an Enter-Click triggers the Stack to go back one step too far.
This does not happen if the "Save" Button is used for submitting.
Example:
Original URL: /folder-1/folder/folder-2/folder/add
Submit by Enter Click:
- Expected URL:
/folder-1/folder/folder-2/folder
- Actual URL:
/folder-1/folder
Submit by Save-Button Click (this works as expected):
- Expected URL:
/folder-1/folder/folder-2/folder
- Actual URL:
/folder-1/folder/folder-2/folder
Workaround from PR #482:
Per default, if there is a form in an EditDialog and it's submitted by pressing enter, the stack goes back one page after submitting.
The reason is this code:
// https://github.com/vivid-planet/comet-admin/blob/next/packages/admin/src/FinalForm.tsx#L40
onAfterSubmit = () => {
stackApi?.goBack();
},
If onAfterSubmit
is overwritten in the form, it doesn't close at all when submitting with Enter. The reason is, that the selection is not deselected. This is done inside handleSaveClick
(https://github.com/vivid-planet/comet-admin/blob/next/packages/admin/src/EditDialog.tsx#L97) and handleCancelClick
(https://github.com/vivid-planet/comet-admin/blob/next/packages/admin/src/EditDialog.tsx#L105) inside the EditDialog. But submitting via Enter doesn't trigger any of them.
The issue can be resolved by exporting the selectionApi from useEditDialog. Then onAfterSubmit
has to be overwritten in the FinalForm
and the handleDeselect
has to be triggered manually inside this method:
<FinalForm
// ...
onAfterSubmit={() => {
// override stackApi.goBack()
selectionApi.handleDeselect();
}}
>
// ...
</FinalForm>