Merge pull request #151 from zilliztech/fix-submit-url-problem

fix submit form will change url problem

client/src/components/customDialog/CustomDialog.tsx

@@ -67,7 +67,7 @@ const CustomDialog: FC<CustomDialogType> = props => {
     handleClose,
   } = params; // for notice type
   const { component: CustomComponent } = params; // for custom type
-  const handleConfirm = async () => {
+  const handleConfirm = async (event: React.FormEvent<HTMLFormElement>) => {
     if (confirm) {
       const res = await confirm();
       if (!res) {
@@ -75,6 +75,7 @@ const CustomDialog: FC<CustomDialogType> = props => {
       }
     }
     handleClose ? handleClose() : onClose();
+    event.preventDefault();
   };
 
   const handleCancel = async () => {

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -53,8 +53,9 @@ const DeleteTemplate: FC<DeleteDialogContentType> = props => {
     handleCancel && handleCancel();
   };
 
-  const onDeleteClick = () => {
+  const onDeleteClick = (event: React.FormEvent<HTMLFormElement>) => {
     handleDelete();
+    event.preventDefault();
   };
 
   const onChange = (event: ChangeEvent<HTMLInputElement>) => {

client/src/components/customDialog/DialogTemplate.tsx

@@ -14,6 +14,9 @@ import CodeView from '../code/CodeView';
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
     display: 'flex',
+    '& form': {
+      display: 'flex',
+    },
   },
   block: {
     borderRadius: 8,
@@ -76,9 +79,14 @@ const DialogTemplate: FC<DialogContainerProps> = ({
     }
   }, [children]);
 
+  const _handleConfirm = (event: React.FormEvent<HTMLFormElement>) => {
+    handleConfirm();
+    event.preventDefault();
+  };
+
   return (
     <section className={classes.wrapper}>
-      <form onSubmit={handleConfirm}>
+      <form onSubmit={_handleConfirm}>
         <div
           ref={dialogRef}
           className={`${classes.dialog} ${classes.block} ${dialogClass}`}

client/src/components/customDialog/Types.ts

@@ -28,7 +28,7 @@ export type DialogContainerProps = {
   showCloseIcon?: boolean;
   handleClose: () => void;
   handleCancel?: () => void;
-  handleConfirm: (param: any) => void;
+  handleConfirm: (param?: any) => void;
   confirmDisabled?: boolean;
   showActions?: boolean;
   showCancel?: boolean;