fix: #1959 submit modal wizzard wrong close modal behavior (#1960)

packages/elements/src/components/Modal/__tests__/__snapshots__/index.tsx.snap

@@ -34,6 +34,7 @@ exports[`Modal should match a snapshot for ModalHeader 1`] = `
     className="delete"
     data-test="modal-close-button"
     onClick={[Function]}
+    type="button"
   />
 </header>
 `;

packages/elements/src/components/Modal/index.tsx

@@ -39,6 +39,7 @@ export const ModalHeader: React.SFC<ModalHeaderProps> = ({ title, afterClose })
         className="delete"
         aria-label="close"
         data-test="modal-close-button"
+        type="button"
         onClick={event => {
           event.preventDefault()
           afterClose && afterClose()

packages/marketplace/src/components/ui/__tests__/__snapshots__/app-confirm-install.tsx.snap

@@ -34,6 +34,7 @@ exports[`AppConfirmInstallContent should match snapshot 1`] = `
           className="delete"
           data-test="modal-close-button"
           onClick={[Function]}
+          type="button"
         />
       </header>
     </Component>

packages/marketplace/src/components/ui/__tests__/__snapshots__/app-confirm-uninstall.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`AppConfirmUninstall render correctly 1`] = `
           className="delete"
           data-test="modal-close-button"
           onClick={[Function]}
+          type="button"
         />
       </header>
     </Component>

packages/marketplace/src/components/ui/app-installations/confirm-uninstall/__tests__/__snapshots__/confirm-uninstall.test.tsx.snap

@@ -138,6 +138,7 @@ exports[`ConfirmUninstall should match a snapshot 1`] = `
                 className="delete"
                 data-test="modal-close-button"
                 onClick={[Function]}
+                type="button"
               />
             </header>
           </Component>

packages/marketplace/src/components/ui/submit-app-wizard/__tests__/__snapshots__/submit-app-wizard.test.tsx.snap

@@ -13,7 +13,9 @@ exports[`SubmitAppWizard should match snapshot when visible = true 1`] = `
     }
     onSubmit={[Function]}
   >
-    <Form>
+    <Form
+      onKeyPress={[Function]}
+    >
       <Component
         afterClose={[Function]}
         title="Before you start"

packages/marketplace/src/components/ui/submit-app-wizard/__tests__/submit-app-wizard-modal.test.tsx

@@ -41,6 +41,7 @@ describe('SubmitAppWizardModal', () => {
         getReduxState: (getReduxState as unknown) as () => ReduxState,
         selectSubmitAppFormState: () => 'PENDING',
       })()
+      expect(afterClose).toHaveBeenCalled()
     })
   })
   test('handleUseEffect should run correctly', () => {

packages/marketplace/src/components/ui/submit-app-wizard/submit-app-wizard-modal.tsx

@@ -28,11 +28,13 @@ export const customAfterClose = ({
   // Has to access redux state of formState manually because it will lead to <Modal/> and result many weird bugs
   // E.g: Formik state reset, wizzard step state reset
   const submitAppFormState = selectSubmitAppFormState(getReduxState())
+
   if (submitAppFormState === 'SUCCESS') {
     const page = qs.parse(location.search)?.page || 1
     dispatch(developerRequestData({ page }))
-    afterClose()
   }
+
+  afterClose()
 }
 
 export const handleUseEffect = (dispatch: Dispatch) => () => {

packages/marketplace/src/components/ui/submit-app-wizard/submit-app-wizard.tsx

@@ -114,7 +114,17 @@ export const SubmitAppWizard: React.FC<Pick<ModalProps, 'afterClose'>> = ({ afte
         onSubmit={handleSubmit({ setWizardStep, dispatch })}
         validationSchema={validationSchemas[currentWizardStep]}
       >
-        <Form>
+        <Form
+          onKeyPress={e => {
+            const key = e.charCode || e.keyCode || 0
+            // prevent submit form using enter
+            // not handle yet
+            const enterKeyCode = 13
+            if (key === enterKeyCode) {
+              e.preventDefault()
+            }
+          }}
+        >
           <ModalHeader title={titleMap[currentWizardStep]} afterClose={afterClose} />
           <CurrentStepComponent afterClose={afterClose} setWizardStep={setWizardStep} />
         </Form>