diff --git a/packages/desktop-client/src/components/reports/SaveReportChoose.tsx b/packages/desktop-client/src/components/reports/SaveReportChoose.tsx index 43f396176f96eb8214d0545fc964817ce9142e82..42b1b73b070430ee4955353611602317af592a83 100644 --- 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 index fd3f2c5e5ab7e0a42bc1dfe378451c586bfda3b7..74d4b458a43a9d302373b21be6ed057e3591cff8 100644 --- 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 new file mode 100644 index 0000000000000000000000000000000000000000..541a072ce91d3004e03986fa6c80b4e676e9879e --- /dev/null +++ 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.