diff --git a/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx b/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx
index 17ee82e87c2..4c29f179bb8 100644
--- a/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx
+++ b/packages/desktop-client/src/components/select/RecurringSchedulePicker.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useReducer, useState } from 'react';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
import { sendCatch } from 'loot-core/src/platform/client/fetch';
import * as monthUtils from 'loot-core/src/shared/months';
@@ -9,12 +9,12 @@ import { SvgAdd, SvgSubtract } from '../../icons/v0';
import { theme } from '../../style';
import { Button } from '../common/Button';
import { Input } from '../common/Input';
+import { Popover } from '../common/Popover';
import { Select } from '../common/Select';
import { Stack } from '../common/Stack';
import { Text } from '../common/Text';
import { View } from '../common/View';
import { Checkbox } from '../forms';
-import { useTooltip, Tooltip } from '../tooltips';
import { DateSelect } from './DateSelect';
@@ -48,19 +48,18 @@ function parsePatternValue(value) {
}
function parseConfig(config) {
- return (
- config || {
- start: monthUtils.currentDay(),
- interval: 1,
- frequency: 'monthly',
- patterns: [createMonthlyRecurrence(monthUtils.currentDay())],
- skipWeekend: false,
- weekendSolveMode: 'before',
- endMode: 'never',
- endOccurrences: '1',
- endDate: monthUtils.currentDay(),
- }
- );
+ return {
+ start: monthUtils.currentDay(),
+ interval: 1,
+ frequency: 'monthly',
+ patterns: [createMonthlyRecurrence(monthUtils.currentDay())],
+ skipWeekend: false,
+ weekendSolveMode: 'before',
+ endMode: 'never',
+ endOccurrences: '1',
+ endDate: monthUtils.currentDay(),
+ ...config,
+ };
}
function unparseConfig(parsed) {
@@ -309,12 +308,7 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
}
return (
-
+ <>
-
+ >
);
}
export function RecurringSchedulePicker({ value, buttonStyle, onChange }) {
- const { isOpen, close, getOpenEvents } = useTooltip();
+ const triggerRef = useRef(null);
+ const [isOpen, setIsOpen] = useState(false);
const dateFormat = useDateFormat() || 'MM/dd/yyyy';
function onSave(config) {
onChange(config);
- close();
+ setIsOpen(false);
}
return (
- {isOpen && (
+
+ setIsOpen(false)}
+ >
setIsOpen(false)}
onSave={onSave}
/>
- )}
+
);
}
diff --git a/upcoming-release-notes/2766.md b/upcoming-release-notes/2766.md
new file mode 100644
index 00000000000..cc9a4e48974
--- /dev/null
+++ b/upcoming-release-notes/2766.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+Migrating recurring schedule `Tooltip` component to react-aria Tooltip/Popover (vol.5)