vivid-planet / comet

Comet DXP

Home Page:https://comet-dxp.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

Bildschirmfoto 2021-07-07 um 15 03 54

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>