Add confirmation to reset button

Fixes: AFORM-3841
episerver · Dec 27, 2023 · fa0bcad · fa0bcad
1 parent 0548884
commit fa0bcad
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/src/@episerver/forms-react/src/components/elements/ResetButtonElementBlock.tsx b/src/@episerver/forms-react/src/components/elements/ResetButtonElementBlock.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo } from "react";
-import { ResetButton } from "@episerver/forms-sdk";
+import { FormContainer, ResetButton } from "@episerver/forms-sdk";
 import { useElement } from "../../hooks/useElement";
+import { useForms } from "../../context/store";
 
 interface ResetButtonElementBlockProps {
     element: ResetButton
@@ -11,15 +12,24 @@ export const ResetButtonElementBlock = (props: ResetButtonElementBlockProps) =>
     const { elementContext, handleReset } = useElement(element);
     const { extraAttr } = elementContext;
 
-    return useMemo(()=>(
+    const formContext = useForms();
+    const form = formContext?.formContainer ?? {} as FormContainer;
+
+    const handleResetButton = () => {
+        if (confirm(form.properties.resetConfirmationMessage)) {
+            handleReset()
+        }
+    }
+
+    return useMemo(() => (
         <>
-            <input 
-                type="reset" 
-                className="Form__Element FormResetButton Form__Element--NonData" 
+            <input
+                type="reset"
+                className="Form__Element FormResetButton Form__Element--NonData"
                 {...extraAttr}
-                value={element.properties.label} 
-                onClick={handleReset}
+                value={element.properties.label}
+                onClick={handleResetButton}
             />
         </>
-    ),[]);
+    ), []);
 }