Fix reports form submit handlers (#3462)

* Fix form submit handlers * Release notes
actualbudget · Sep 18, 2024 · b3669b3 · b3669b3
1 parent 6f41b20
commit b3669b3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 25 deletions.
diff --git a/packages/desktop-client/src/components/reports/SaveReportChoose.tsx b/packages/desktop-client/src/components/reports/SaveReportChoose.tsx
@@ -1,4 +1,5 @@
 import React, { createRef, useEffect, useState } from 'react';
+import { Form } from 'react-aria-components';
 
 import { theme } from '../../style/theme';
 import { Button } from '../common/Button2';
@@ -24,7 +25,18 @@ export function SaveReportChoose({ onApply }: SaveReportChooseProps) {
 
   return (
     <>
-      <form>
+      <Form
+        onSubmit={e => {
+          e.preventDefault();
+
+          if (!value) {
+            setErr('Invalid report entered');
+            return;
+          }
+
+          onApply(value);
+        }}
+      >
         <View style={{ flexDirection: 'row', align: 'center' }}>
           <Text style={{ userSelect: 'none', flex: 1 }}>Choose Report</Text>
           <View style={{ flex: 1 }} />
@@ -47,21 +59,11 @@ export function SaveReportChoose({ onApply }: SaveReportChooseProps) {
           style={{ marginTop: 15 }}
         >
           <View style={{ flex: 1 }} />
-          <Button
-            variant="primary"
-            onPress={() => {
-              if (!value) {
-                setErr('Invalid report entered');
-                return;
-              }
-
-              onApply(value);
-            }}
-          >
+          <Button variant="primary" type="submit">
             Apply
           </Button>
         </Stack>
-      </form>
+      </Form>
       {err !== '' ? (
         <Stack direction="row" align="center" style={{ padding: 10 }}>
           <Text style={{ color: theme.errorText }}>{err}</Text>

diff --git a/packages/desktop-client/src/components/reports/SaveReportName.tsx b/packages/desktop-client/src/components/reports/SaveReportName.tsx
@@ -1,4 +1,5 @@
 import React, { type RefObject, useEffect } from 'react';
+import { Form } from 'react-aria-components';
 
 import { type CustomReportEntity } from 'loot-core/types/models/reports';
 
@@ -44,7 +45,15 @@ export function SaveReportName({
   return (
     <>
       {menuItem !== 'update-report' && (
-        <form>
+        <Form
+          onSubmit={e => {
+            e.preventDefault();
+            onAddUpdate({
+              menuChoice: menuItem ?? undefined,
+              reportData: report ?? undefined,
+            });
+          }}
+        >
           <Stack
             direction="row"
             justify="flex-end"
@@ -65,20 +74,11 @@ export function SaveReportName({
                 style={{ marginTop: 10 }}
               />
             </FormField>
-            <Button
-              variant="primary"
-              style={{ marginTop: 30 }}
-              onPress={() => {
-                onAddUpdate({
-                  menuChoice: menuItem ?? undefined,
-                  reportData: report ?? undefined,
-                });
-              }}
-            >
+            <Button variant="primary" type="submit" style={{ marginTop: 30 }}>
               {menuItem === 'save-report' ? 'Add' : 'Update'}
             </Button>
           </Stack>
-        </form>
+        </Form>
       )}
       {err !== '' ? (
         <Stack direction="row" align="center" style={{ padding: 10 }}>

diff --git a/upcoming-release-notes/3462.md b/upcoming-release-notes/3462.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [joel-jeremy]
+---
+
+Fix save report forms submit handler so that it doesn't trigger a reload of an entire page on submit.