Add confirmation to reset button

src/@episerver/forms-react/src/components/elements/ParagraphTextElementBlock.tsx

@@ -11,7 +11,7 @@ export interface ParagraphTextElementBlockProps {
 
 export const ParagraphTextElementBlock = (props: ParagraphTextElementBlockProps) => {
     const { element } = props;
-    const { elementContext, handleChange, handleBlur } = useElement(element);
+    const { elementContext } = useElement(element);
     const { isVisible, validationResults, value, validatorClasses } = elementContext;
     const formContext = useForms();
     const form = formContext?.formContainer as FormContainer

src/@episerver/forms-react/src/components/elements/ResetButtonElementBlock.tsx

@@ -11,15 +11,15 @@ export const ResetButtonElementBlock = (props: ResetButtonElementBlockProps) =>
     const { elementContext, handleReset } = useElement(element);
     const { extraAttr } = elementContext;
 
-    return useMemo(()=>(
+    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} 
+                value={element.properties.label}
                 onClick={handleReset}
             />
         </>
-    ),[]);
+    ), []);
 }

src/@episerver/forms-react/src/hooks/useElement.ts

@@ -20,6 +20,7 @@ import {
     FormSubmission,
     FormDependConditions,
     FormValidationResult,
+    htmlDecodeEntities,
     } from "@episerver/forms-sdk";
 import { DispatchFunctions } from "../context/dispatchFunctions";
 
@@ -155,8 +156,20 @@ export const useElement = (element: FormElementBase) => {
         dispatchFuncs.updateValidation(element.key, formValidation.validate(value));
     }
 
+    const shouldResetForm = (resetConfirmationMessage: string) => {
+        if (isNullOrEmpty(resetConfirmationMessage)) {
+          return true;
+        }
+
+        const userConfirmed = confirm(htmlDecodeEntities(resetConfirmationMessage));
+        return userConfirmed;
+      };
+
     const handleReset = () => {
-        dispatchFuncs.resetForm(formContext?.formContainer ?? {} as FormContainer);
+        const form = formContext?.formContainer ?? {} as FormContainer
+        if (shouldResetForm(form.properties.resetConfirmationMessage)) {
+            dispatchFuncs.resetForm(form);
+        }
     }
 
     return { 

src/@episerver/forms-sdk/src/helpers/utils.ts

@@ -71,4 +71,14 @@ export function isInArray (value: string, arrayString: string[], ignoreCase: boo
         arrayString = arrayString.map(s => s.toLowerCase());
     }
     return arrayString.indexOf(value) > -1;
+}
+
+/**
+ * Decodes HTML entities in a given encoded string and returns the decoded string..
+ * @param encodedString - The string containing HTML-encoded entities to be decoded.
+ */
+export function htmlDecodeEntities(encodedString: string) : string{
+    var textArea = document.createElement("textarea");
+    textArea.innerHTML = encodedString;
+    return textArea.value;
 }