🐛 fix recurring schedule datepicker - port to new Popover (#2766)

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 (
-    <Tooltip
-      style={{ padding: 10, width: 380 }}
-      offset={1}
-      position="bottom-left"
-      onClose={onClose}
-    >
+    <>
       <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
         <label htmlFor="start">From</label>
         <DateSelect
@@ -471,36 +465,45 @@ function RecurringScheduleTooltip({ config: currentConfig, onClose, onSave }) {
           Apply
         </Button>
       </div>
-    </Tooltip>
+    </>
   );
 }
 
 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 (
     <View>
       <Button
-        {...getOpenEvents()}
+        ref={triggerRef}
         style={{ textAlign: 'left', ...buttonStyle }}
+        onClick={() => setIsOpen(true)}
       >
         {value
           ? getRecurringDescription(value, dateFormat)
           : 'No recurring date'}
       </Button>
-      {isOpen && (
+
+      <Popover
+        triggerRef={triggerRef}
+        style={{ padding: 10, width: 380 }}
+        placement="bottom start"
+        isOpen={isOpen}
+        onOpenChange={() => setIsOpen(false)}
+      >
         <RecurringScheduleTooltip
           config={value}
-          onClose={close}
+          onClose={() => setIsOpen(false)}
           onSave={onSave}
         />
-      )}
+      </Popover>
     </View>
   );
 }

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)