Merge pull request Expensify#62631 from nkdengineer/fix/61595

fix: error in time modal picker

Author: jasperhuangg

src/components/DatePicker/index.tsx

@@ -1,43 +1,49 @@
 import {format, setYear} from 'date-fns';
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
 import {InteractionManager, View} from 'react-native';
 import * as Expensicons from '@components/Icon/Expensicons';
 import TextInput from '@components/TextInput';
+import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
+import mergeRefs from '@libs/mergeRefs';
 import {setDraftValues} from '@userActions/FormActions';
 import CONST from '@src/CONST';
 import DatePickerModal from './DatePickerModal';
 import type {DateInputWithPickerProps} from './types';
 
 const PADDING_MODAL_DATE_PICKER = 8;
 
-function DatePicker({
-    defaultValue,
-    disabled,
-    errorText,
-    inputID,
-    label,
-    minDate = setYear(new Date(), CONST.CALENDAR_PICKER.MIN_YEAR),
-    maxDate = setYear(new Date(), CONST.CALENDAR_PICKER.MAX_YEAR),
-    onInputChange,
-    onTouched = () => {},
-    placeholder,
-    value,
-    shouldSaveDraft = false,
-    formID,
-    autoFocus = false,
-    shouldHideClearButton = false,
-}: DateInputWithPickerProps) {
+function DatePicker(
+    {
+        defaultValue,
+        disabled,
+        errorText,
+        inputID,
+        label,
+        minDate = setYear(new Date(), CONST.CALENDAR_PICKER.MIN_YEAR),
+        maxDate = setYear(new Date(), CONST.CALENDAR_PICKER.MAX_YEAR),
+        onInputChange,
+        onTouched = () => {},
+        placeholder,
+        value,
+        shouldSaveDraft = false,
+        formID,
+        autoFocus = false,
+        shouldHideClearButton = false,
+    }: DateInputWithPickerProps,
+    ref: ForwardedRef<BaseTextInputRef>,
+) {
     const styles = useThemeStyles();
     const {windowHeight, windowWidth} = useWindowDimensions();
     const {translate} = useLocalize();
     const [isModalVisible, setIsModalVisible] = useState(false);
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined);
     const [popoverPosition, setPopoverPosition] = useState({horizontal: 0, vertical: 0});
-    const textInputRef = useRef<HTMLFormElement | null>(null);
+    const textInputRef = useRef<BaseTextInputRef>(null);
     const anchorRef = useRef<View>(null);
     const [isInverted, setIsInverted] = useState(false);
     const isAutoFocused = useRef(false);
@@ -119,7 +125,7 @@ function DatePicker({
                 style={styles.mv2}
             >
                 <TextInput
-                    ref={textInputRef}
+                    ref={mergeRefs(ref, textInputRef)}
                     inputID={inputID}
                     forceActiveLabel
                     icon={selectedDate ? null : Expensicons.Calendar}

src/components/TimeModalPicker.tsx

@@ -1,4 +1,5 @@
-import React, {useState} from 'react';
+import React, {forwardRef, useState} from 'react';
+import type {ForwardedRef} from 'react';
 import {View} from 'react-native';
 import useThemeStyles from '@hooks/useThemeStyles';
 import DateUtils from '@libs/DateUtils';
@@ -23,7 +24,7 @@ type TimeModalPickerProps = {
     label: string;
 };
 
-function TimeModalPicker({value, errorText, label, onInputChange = () => {}}: TimeModalPickerProps) {
+function TimeModalPicker({value, errorText, label, onInputChange = () => {}}: TimeModalPickerProps, ref: ForwardedRef<View>) {
     const styles = useThemeStyles();
     const [isPickerVisible, setIsPickerVisible] = useState(false);
     const currentTime = value ? DateUtils.extractTime12Hour(value) : undefined;
@@ -47,6 +48,7 @@ function TimeModalPicker({value, errorText, label, onInputChange = () => {}}: Ti
                 onPress={() => setIsPickerVisible(true)}
                 brickRoadIndicator={errorText ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined}
                 errorText={errorText}
+                ref={ref}
             />
             <Modal
                 type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
@@ -81,4 +83,4 @@ function TimeModalPicker({value, errorText, label, onInputChange = () => {}}: Ti
 }
 
 TimeModalPicker.displayName = 'TimeModalPicker';
-export default TimeModalPicker;
+export default forwardRef(TimeModalPicker);