Update date picker to allow typing in dates

src/CONST/index.ts

@@ -1668,6 +1668,11 @@ const CONST = {
             shortcutKey: 'Backspace',
             modifiers: [],
         },
+        DELETE: {
+            descriptionKey: null,
+            shortcutKey: 'Delete',
+            modifiers: [],
+        },
         SPACE: {
             descriptionKey: null,
             shortcutKey: 'Space',

src/components/DatePicker/CalendarPicker/MonthPickerModal.tsx

@@ -1,5 +1,6 @@
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
+import {usePopoverActions} from '@components/PopoverProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
@@ -11,8 +12,10 @@ import DateUtils from '@libs/DateUtils';
 
 import CONST from '@src/CONST';
 
+import type {View} from 'react-native';
+
 import {Str} from 'expensify-common';
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import {Keyboard} from 'react-native';
 
 import type CalendarPickerListItem from './types';
@@ -41,6 +44,8 @@ type MonthPickerModalProps = {
 function MonthPickerModal({isVisible, currentMonth, minMonth, maxMonth, onMonthChange, onClose, shouldEnableBackdropInNarrowPane = false}: MonthPickerModalProps) {
     const styles = useThemeStyles();
     const {translate, dateFnsLocale} = useLocalize();
+    const {setActivePopoverExtraAnchorRef} = usePopoverActions();
+    const contentRef = useRef<View>(null);
     const [searchText, setSearchText] = useState('');
     // The rows are built here from numbers, so the compiler can cache them across the calendar's re-renders.
     const months: CalendarPickerListItem[] = DateUtils.getMonthNames(dateFnsLocale).map((month, index) => ({
@@ -51,6 +56,16 @@ function MonthPickerModal({isVisible, currentMonth, minMonth, maxMonth, onMonthC
         isDisabled: index < minMonth || index > maxMonth,
     }));
 
+    useEffect(() => {
+        if (!isVisible) {
+            return;
+        }
+
+        // This modal is rendered above the calendar rather than inside it, so a press on a month counts as a press
+        // outside the calendar popover and would dismiss it. Registering the content keeps the calendar open.
+        setActivePopoverExtraAnchorRef(contentRef);
+    }, [isVisible, setActivePopoverExtraAnchorRef]);
+
     const filteredMonths = searchText === '' ? months : months.filter((month) => month.text?.toLowerCase().includes(searchText.toLowerCase()));
     const headerMessage = !filteredMonths.length ? translate('common.noResultsFound') : '';
     const data = filteredMonths;
@@ -82,6 +97,7 @@ function MonthPickerModal({isVisible, currentMonth, minMonth, maxMonth, onMonthC
             enableEdgeToEdgeBottomSafeAreaPadding
         >
             <ScreenWrapper
+                ref={contentRef}
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 enableEdgeToEdgeBottomSafeAreaPadding

src/components/DatePicker/CalendarPicker/YearPickerModal.tsx

@@ -1,5 +1,6 @@
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import Modal from '@components/Modal';
+import {usePopoverActions} from '@components/PopoverProvider';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SelectionList from '@components/SelectionList';
 import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem';
@@ -12,7 +13,9 @@ import moveInitialSelectionToTop, {shouldMoveInitialSelectionToTop} from '@libs/
 
 import CONST from '@src/CONST';
 
-import React, {useEffect, useState} from 'react';
+import type {View} from 'react-native';
+
+import React, {useEffect, useRef, useState} from 'react';
 import {Keyboard} from 'react-native';
 
 import type CalendarPickerListItem from './types';
@@ -41,7 +44,20 @@ type YearPickerModalProps = {
 function YearPickerModal({isVisible, minYear, maxYear, currentYear, onYearChange, onClose, shouldEnableBackdropInNarrowPane = false}: YearPickerModalProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const {setActivePopoverExtraAnchorRef} = usePopoverActions();
+    const contentRef = useRef<View>(null);
     const [searchText, setSearchText] = useState('');
+
+    useEffect(() => {
+        if (!isVisible) {
+            return;
+        }
+
+        // This modal is rendered above the calendar rather than inside it, so a press on a year counts as a press
+        // outside the calendar popover and would dismiss it. Registering the content keeps the calendar open.
+        setActivePopoverExtraAnchorRef(contentRef);
+    }, [isVisible, setActivePopoverExtraAnchorRef]);
+
     // Freeze the year selected when the picker opened so it stays pinned to the top for the whole open cycle, even as the live selection changes.
     const initialYear = useInitialSelection(currentYear, {isVisible});
     // The rows are built here from numbers, so the compiler can cache them and the sort below across the calendar's re-renders.
@@ -97,6 +113,7 @@ function YearPickerModal({isVisible, minYear, maxYear, currentYear, onYearChange
             enableEdgeToEdgeBottomSafeAreaPadding
         >
             <ScreenWrapper
+                ref={contentRef}
                 style={[styles.pb0]}
                 includePaddingTop={false}
                 enableEdgeToEdgeBottomSafeAreaPadding

src/components/DatePicker/CalendarPicker/index.tsx

@@ -13,7 +13,7 @@ import CONST from '@src/CONST';
 import type {ComponentRef} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 
-import {addMonths, addYears, clamp, isSameDay, isValid, setMonth, setYear, startOfDay, startOfMonth, subMonths, subYears} from 'date-fns';
+import {addMonths, addYears, clamp, format, isSameDay, isValid, setMonth, setYear, startOfDay, startOfMonth, subMonths, subYears} from 'date-fns';
 import {Str} from 'expensify-common';
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
@@ -47,6 +47,12 @@ type CalendarPickerProps = {
     /** Called with the picked day at local midnight */
     onSelected?: (selectedDate: Date) => void;
 
+    /**
+     * Called when a month or year is picked from its own picker, with the date that pick lands on. The selection is
+     * not finished, so the calendar stays open for the day press. Leave it out to have those picks only move the view.
+     */
+    onMonthOrYearSelected?: (selectedDate: string) => void;
+
     /** Optional style override for the header container */
     headerContainerStyle?: StyleProp<ViewStyle>;
 
@@ -55,6 +61,21 @@ type CalendarPickerProps = {
 
     /** Whether Month/Year right-docked picker modals should keep backdrop in narrow pane context */
     shouldEnableMonthYearBackdropInNarrowPane?: boolean;
+
+    /**
+     * Moves the calendar to this month without selecting a day, so it can follow a date being typed into the input.
+     * The calendar still owns its own view, so its arrows and month picker keep working between updates.
+     */
+    viewDate?: Date;
+
+    /** Changes every time `viewDate` is asserted, including when it repeats the month the calendar already shows */
+    viewDateVersion?: number;
+
+    /**
+     * Called once the month or year picker has closed, whether a pick was made or not. Those pickers are modals, so
+     * they take focus with them, which a caller that owns the focused element has to take back.
+     */
+    onMonthOrYearPickerClose?: () => void;
 };
 
 /** A bound can be built from data, such as a time zone or a stored date, so an invalid one falls back to the default like a missing one, instead of making every date invalid. */
@@ -68,11 +89,15 @@ function CalendarPicker({
     minDate: minDateProp,
     maxDate: maxDateProp,
     onSelected,
+    onMonthOrYearSelected,
     DayComponent = Day,
     isDateSelectable,
     headerContainerStyle,
     containerStyle,
     shouldEnableMonthYearBackdropInNarrowPane = false,
+    viewDate,
+    viewDateVersion = 0,
+    onMonthOrYearPickerClose,
 }: CalendarPickerProps) {
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
@@ -83,7 +108,10 @@ function CalendarPicker({
     const monthPressableRef = useRef<ComponentRef<typeof View>>(null);
     const minDate = getBound(minDateProp, CONST.CALENDAR_PICKER.MIN_YEAR);
     const maxDate = getBound(maxDateProp, CONST.CALENDAR_PICKER.MAX_YEAR);
-    const [dateView, setDateView] = useState(value ?? defaultMonth ?? new Date());
+    // The popover unmounts its content, so the calendar starts over every time it is reopened. A view the field has
+    // already asserted is what it starts from, since a date still being typed has no committed value to fall back to.
+    const [dateView, setDateView] = useState(() => viewDate ?? value ?? defaultMonth ?? new Date());
+    const [appliedViewDateVersion, setAppliedViewDateVersion] = useState(viewDateVersion);
     // defaultMonth can be a new Date on every render, such as today, so the view follows it only when it moves to another month and nothing is selected.
     const validDefaultMonth = defaultMonth && isValid(defaultMonth) ? defaultMonth : undefined;
     const defaultMonthTime = validDefaultMonth && startOfMonth(validDefaultMonth).getTime();
@@ -94,6 +122,14 @@ function CalendarPicker({
             setDateView(validDefaultMonth ?? new Date());
         }
     }
+
+    // Catching up with the caller here rather than in an effect keeps the view and the month matrix in step within a
+    // single render, so the calendar never paints the old month first.
+    if (viewDate && viewDateVersion !== appliedViewDateVersion) {
+        setAppliedViewDateVersion(viewDateVersion);
+        setDateView(viewDate);
+    }
+
     const currentDateView = clamp(dateView, {start: minDate, end: maxDate});
     const [isYearPickerVisible, setIsYearPickerVisible] = useState(false);
     const [isMonthPickerVisible, setIsMonthPickerVisible] = useState(false);
@@ -113,13 +149,23 @@ function CalendarPicker({
     const maxMonthStart = startOfMonth(maxDate);
     const currentMonthStart = startOfMonth(currentDateView);
 
+    /**
+     * The year and month on offer are each held to the bounds, but the date they land on need not be, since the day and
+     * whichever of the two was not picked come along unchanged. The view is pulled into range on its way to the screen,
+     * so the date handed over is pulled in the same way rather than disagreeing with the month being shown.
+     */
+    const selectMonthOrYear = (newDateView: Date) => {
+        setDateView(newDateView);
+        onMonthOrYearSelected?.(format(clamp(newDateView, {start: minDate, end: maxDate}), CONST.DATE.FNS_FORMAT_STRING));
+    };
+
     const onYearSelected = (year: number) => {
-        setDateView(addYears(currentDateView, year - currentYearView));
+        selectMonthOrYear(addYears(currentDateView, year - currentYearView));
         requestAnimationFrame(() => setIsYearPickerVisible(false));
     };
 
     const onMonthSelected = (month: number) => {
-        setDateView(setMonth(currentDateView, month));
+        selectMonthOrYear(setMonth(currentDateView, month));
         requestAnimationFrame(() => setIsMonthPickerVisible(false));
     };
 
@@ -389,7 +435,10 @@ function CalendarPicker({
                 maxYear={maxYear}
                 currentYear={currentYearView}
                 onYearChange={onYearSelected}
-                onClose={() => setIsYearPickerVisible(false)}
+                onClose={() => {
+                    setIsYearPickerVisible(false);
+                    onMonthOrYearPickerClose?.();
+                }}
                 shouldEnableBackdropInNarrowPane={shouldEnableMonthYearBackdropInNarrowPane}
             />
             <MonthPickerModal
@@ -398,7 +447,10 @@ function CalendarPicker({
                 minMonth={minMonth}
                 maxMonth={maxMonth}
                 onMonthChange={onMonthSelected}
-                onClose={() => setIsMonthPickerVisible(false)}
+                onClose={() => {
+                    setIsMonthPickerVisible(false);
+                    onMonthOrYearPickerClose?.();
+                }}
                 shouldEnableBackdropInNarrowPane={shouldEnableMonthYearBackdropInNarrowPane}
             />
         </View>

src/components/DatePicker/DatePickerModal.tsx

@@ -52,16 +52,27 @@ function DatePickerModal({
     anchorPosition,
     anchorAlignment = DEFAULT_ANCHOR_ORIGIN,
     onSelected,
+    onMonthOrYearSelected,
     shouldCloseWhenBrowserNavigationChanged = false,
     shouldPositionFromTop = false,
     forwardedFSClass,
     shouldEnableMonthYearBackdropInNarrowPane = false,
+    anchorRef: anchorRefProp,
+    withoutOverlay = false,
+    shouldAllowWithoutOverlayInNarrowPane = false,
+    shouldCloseOnWheel = true,
+    viewDate,
+    viewDateVersion,
+    onMonthOrYearPickerClose,
     shouldMeasureContentHeight = false,
     windowMargin,
     shouldSwitchPositionIfOverflow = true,
 }: DatePickerProps) {
     const [selectedDate, setSelectedDate] = useState(value);
-    const anchorRef = useRef<ComponentRef<typeof View>>(null);
+    const fallbackAnchorRef = useRef<ComponentRef<typeof View>>(null);
+    // PopoverProvider treats a click inside the anchor as "not outside", so the caller's own anchor has to be used
+    // or clicking the date input while the calendar is open would dismiss it.
+    const anchorRef = anchorRefProp ?? fallbackAnchorRef;
     const styles = useThemeStyles();
 
     // We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to distinguish RHL and narrow layout
@@ -77,14 +88,29 @@ function DatePickerModal({
         }
     }, [formID, inputID, selectedDate, shouldSaveDraft, value]);
 
-    const handleDateSelection = (date: Date) => {
-        const newValue = format(date, CONST.DATE.FNS_FORMAT_STRING);
-        onSelected?.(newValue);
+    const applySelection = (newValue: string) => {
         onTouched?.();
         onInputChange?.(newValue);
         setSelectedDate(newValue);
     };
 
+    const handleDateSelection = (date: Date) => {
+        const newValue = format(date, CONST.DATE.FNS_FORMAT_STRING);
+        onSelected?.(newValue);
+        applySelection(newValue);
+    };
+
+    const applyMonthOrYearSelection = (newValue: string) => {
+        onMonthOrYearSelected?.(newValue);
+
+        // An empty field has no day to mark as selected, so the pick only moves the calendar
+        if (!value) {
+            return;
+        }
+
+        applySelection(newValue);
+    };
+
     // Pass the CalendarPicker's existing bottom padding (pb4) as the base style so the safe-area padding is
     // added on top of it instead of overriding it (containerStyle is applied after pb4 in CalendarPicker).
     // The modal doesn't render an offline indicator inside it, so disable the offline-indicator padding —
@@ -110,6 +136,9 @@ function DatePickerModal({
             forwardedFSClass={forwardedFSClass}
             shouldDisplayBelowModals
             enableEdgeToEdgeBottomSafeAreaPadding
+            withoutOverlay={withoutOverlay}
+            shouldAllowWithoutOverlayInNarrowPane={shouldAllowWithoutOverlayInNarrowPane}
+            shouldCloseOnWheel={shouldCloseOnWheel}
         >
             <CalendarPicker
                 minDate={minDate}
@@ -118,8 +147,12 @@ function DatePickerModal({
                 value={DateUtils.parseCalendarDate(selectedDate)}
                 defaultMonth={DateUtils.parseCalendarDate(defaultValue)}
                 onSelected={handleDateSelection}
+                onMonthOrYearSelected={onMonthOrYearSelected ? applyMonthOrYearSelection : undefined}
                 containerStyle={bottomSafeAreaPaddingStyle}
                 shouldEnableMonthYearBackdropInNarrowPane={shouldEnableMonthYearBackdropInNarrowPane}
+                viewDate={viewDate}
+                viewDateVersion={viewDateVersion}
+                onMonthOrYearPickerClose={onMonthOrYearPickerClose}
             />
         </PopoverWithMeasuredContent>
     );