diff --git a/frontend/components/forms/packs/EditPackForm/EditPackForm.tsx b/frontend/components/forms/packs/EditPackForm/EditPackForm.tsx
index 6da6fe0ede..b46af924ae 100644
--- a/frontend/components/forms/packs/EditPackForm/EditPackForm.tsx
+++ b/frontend/components/forms/packs/EditPackForm/EditPackForm.tsx
@@ -79,7 +79,9 @@ const EditPackForm = ({
     setPackFormTargets(value);
   };
 
-  const onFormSubmit = (): void => {
+  const onFormSubmit = (evt: React.FormEvent<HTMLFormElement>): void => {
+    evt.preventDefault();
+
     if (packName === "") {
       return setErrors({
         ...errors,
@@ -140,7 +142,7 @@ const EditPackForm = ({
           Cancel
         </Button>
         <Button
-          onClick={onFormSubmit}
+          type="submit"
           variant="brand"
           className="save-loading"
           isLoading={isUpdatingPack}
diff --git a/frontend/components/forms/packs/PackForm/PackForm.tsx b/frontend/components/forms/packs/PackForm/PackForm.tsx
index bc789edb6e..dc1e494009 100644
--- a/frontend/components/forms/packs/PackForm/PackForm.tsx
+++ b/frontend/components/forms/packs/PackForm/PackForm.tsx
@@ -54,7 +54,9 @@ const EditPackForm = ({
     setPackFormTargets(value);
   };
 
-  const onFormSubmit = (): void => {
+  const onFormSubmit = (evt: React.FormEvent<HTMLFormElement>): void => {
+    evt.preventDefault();
+
     if (packName === "") {
       return setErrors({
         ...errors,
@@ -113,11 +115,7 @@ const EditPackForm = ({
           />
         </div>
         <div className={`${baseClass}__pack-buttons`}>
-          <Button
-            onClick={onFormSubmit}
-            variant="brand"
-            isLoading={isUpdatingPack}
-          >
+          <Button type="submit" variant="brand" isLoading={isUpdatingPack}>
             Save query pack
           </Button>
         </div>
diff --git a/frontend/pages/policies/ManagePoliciesPage/components/PreviewPayloadModal/PreviewPayloadModal.tsx b/frontend/pages/policies/ManagePoliciesPage/components/PreviewPayloadModal/PreviewPayloadModal.tsx
index 0d33c84073..7d91cb5ae9 100644
--- a/frontend/pages/policies/ManagePoliciesPage/components/PreviewPayloadModal/PreviewPayloadModal.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/components/PreviewPayloadModal/PreviewPayloadModal.tsx
@@ -43,7 +43,12 @@ const PreviewPayloadModal = ({
   };
 
   return (
-    <Modal title={"Example payload"} onExit={onCancel} className={baseClass}>
+    <Modal
+      title={"Example payload"}
+      onExit={onCancel}
+      onEnter={onCancel}
+      className={baseClass}
+    >
       <div className={`${baseClass}__preview-modal`}>
         <p>
           Want to learn more about how automations in Fleet work?{" "}
diff --git a/frontend/pages/software/ManageSoftwarePage/components/PreviewPayloadModal/PreviewPayloadModal.tsx b/frontend/pages/software/ManageSoftwarePage/components/PreviewPayloadModal/PreviewPayloadModal.tsx
index a8455ada3b..eea5b48f36 100644
--- a/frontend/pages/software/ManageSoftwarePage/components/PreviewPayloadModal/PreviewPayloadModal.tsx
+++ b/frontend/pages/software/ManageSoftwarePage/components/PreviewPayloadModal/PreviewPayloadModal.tsx
@@ -53,7 +53,12 @@ const PreviewPayloadModal = ({
   }
 
   return (
-    <Modal title={"Example payload"} onExit={onCancel} className={baseClass}>
+    <Modal
+      title={"Example payload"}
+      onExit={onCancel}
+      onEnter={onCancel}
+      className={baseClass}
+    >
       <div className={`${baseClass}__preview-modal`}>
         <p>
           Want to learn more about how automations in Fleet work?{" "}