reset forms on cancel

folio-org · Dec 19, 2024 · 93b9d26 · 93b9d26
1 parent ca5c5db
commit 93b9d26
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/lib/claiming/components/modals/DelayClaimsModal/DelayClaimsModal.js b/lib/claiming/components/modals/DelayClaimsModal/DelayClaimsModal.js
@@ -1,4 +1,6 @@
 import PropTypes from 'prop-types';
+import { useCallback } from 'react';
+import { useForm } from 'react-final-form';
 import {
   FormattedMessage,
   useIntl,
@@ -23,16 +25,22 @@ const DelayClaimsModal = ({
   onCancel,
   open,
 }) => {
+  const { reset } = useForm();
   const intl = useIntl();
   const modalLabel = intl.formatMessage(
     { id: 'stripes-acq-components.claiming.modal.delayClaim.heading' },
     { count: claimsCount },
   );
 
+  const handleCancel = useCallback(() => {
+    onCancel();
+    reset();
+  }, [onCancel, reset]);
+
   const start = (
     <Button
       marginBottom0
-      onClick={onCancel}
+      onClick={handleCancel}
     >
       <FormattedMessage id="stripes-acq-components.FormFooter.cancel" />
     </Button>

diff --git a/lib/claiming/components/modals/SendClaimsModal/SendClaimsModal.js b/lib/claiming/components/modals/SendClaimsModal/SendClaimsModal.js
@@ -1,6 +1,10 @@
 import identity from 'lodash/identity';
 import PropTypes from 'prop-types';
-import { Field } from 'react-final-form';
+import { useCallback } from 'react';
+import {
+  Field,
+  useForm,
+} from 'react-final-form';
 import {
   FormattedMessage,
   useIntl,
@@ -26,16 +30,22 @@ const SendClaimsModal = ({
   open,
   message,
 }) => {
+  const { reset } = useForm();
   const intl = useIntl();
   const modalLabel = intl.formatMessage(
     { id: 'stripes-acq-components.claiming.modal.sendClaim.heading' },
     { count: claimsCount },
   );
 
+  const handleCancel = useCallback(() => {
+    onCancel();
+    reset();
+  }, [onCancel, reset]);
+
   const start = (
     <Button
       marginBottom0
-      onClick={onCancel}
+      onClick={handleCancel}
     >
       <FormattedMessage id="stripes-acq-components.FormFooter.cancel" />
     </Button>