From 05bad0a2dd46d987da58d3d83ec1e1e89851d8f9 Mon Sep 17 00:00:00 2001
From: Antonio Vizuete <antonio.vizuete@lansweeper.com>
Date: Wed, 5 Oct 2022 15:43:19 +0200
Subject: [PATCH] :rocket: Fit to starndars the ParameterDialog form

---
 .../QueryForm/components/ParameterDialog.tsx  | 67 +++++++++++--------
 1 file changed, 38 insertions(+), 29 deletions(-)

diff --git a/src/components/QueryForm/components/ParameterDialog.tsx b/src/components/QueryForm/components/ParameterDialog.tsx
index 695e619..83c775f 100644
--- 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>
   );
 }