🚀 Fit to starndars the ParameterDialog form

antoniovizuete · Oct 5, 2022 · 05bad0a · 05bad0a
1 parent 5a102a5
commit 05bad0a
Showing 1 changed file with 38 additions and 29 deletions.
diff --git a/src/components/QueryForm/components/ParameterDialog.tsx b/src/components/QueryForm/components/ParameterDialog.tsx
@@ -40,7 +40,9 @@ export default function ParameterDialog({
     clearState();
   };
 
-  const handleOnClickSave = () => {
+  const handleOnClickSave = (e: React.SyntheticEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
     if (key && value) {
       onConfirm(key, value, data ? "edit" : "new");
       clearState();
@@ -53,35 +55,42 @@ export default function ParameterDialog({
       isOpen={isOpen}
       onClose={handleOnClickClose}
     >
-      <div className={Classes.DIALOG_BODY}>
-        <ControlGroup vertical>
-          <InputGroup
-            placeholder="Key"
-            value={key}
-            onChange={(e) => setKey(e.target.value)}
-            disabled={data !== undefined}
-          />
-          <InputGroup
-            placeholder="Value"
-            value={value}
-            onChange={(e) => setValue(e.target.value)}
-          />
-        </ControlGroup>
-      </div>
-      <div className={Classes.DIALOG_FOOTER}>
-        <div className={Classes.DIALOG_FOOTER_ACTIONS}>
-          <Button onClick={handleOnClickClose} intent={Intent.NONE}>
-            Close
-          </Button>
-          <Button
-            disabled={!key || !value}
-            onClick={handleOnClickSave}
-            intent={Intent.PRIMARY}
-          >
-            Save
-          </Button>
+      <form onSubmit={handleOnClickSave}>
+        <div className={Classes.DIALOG_BODY}>
+          <ControlGroup vertical>
+            <InputGroup
+              placeholder="Key"
+              value={key}
+              onChange={(e) => setKey(e.target.value)}
+              disabled={data !== undefined}
+            />
+            <InputGroup
+              placeholder="Value"
+              value={value}
+              onChange={(e) => setValue(e.target.value)}
+            />
+          </ControlGroup>
         </div>
-      </div>
+        <div className={Classes.DIALOG_FOOTER}>
+          <div className={Classes.DIALOG_FOOTER_ACTIONS}>
+            <Button
+              onClick={handleOnClickClose}
+              intent={Intent.NONE}
+              type="reset"
+            >
+              Close
+            </Button>
+            <Button
+              type="submit"
+              disabled={!key || !value}
+              //onClick={handleOnClickSave}
+              intent={Intent.PRIMARY}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+      </form>
     </Dialog>
   );
 }