[Due for payment 2025-04-23] [$500] Update Datepicker UX

[dannymcclain]

Problem

Currently our datepicker inputs always show the calendar popover, and this leads to a pretty cumbersome interface in places like the search filters where we have both a before and after date input.

Solution

Coming from this thread, let’s update our datepicker so that the calendar popover only appears when the input is focused.

CleanShot.2024-11-15.at.08.49.24.mp4

Notes:

• For this update, we’re going to leave the placeholder text as is. Focusing the input should only change the border to green and make the popover appear. (It should not bring up the keyboard on mobile.)
• Selecting a date in the popover should set the date in the input and blur the input (thereby dismissing the calendar popover).
• We also need to update the selected state of the date to match our designs (green background, bold text, with the same text color we use for our green buttons).
• For the date filter in search and other places where there may be multiple inputs, we do not want to auto-focus the first date input (as this would hide the input below it), but in situations where there is only one date input (like clearing your status for example) we do want to autofocus the input to reveal the popover right away.
• We plan on doing a “phase 2” update to the datepicker where we will allow users to select a date by either using the popover OR by typing a date into the input, likely using some kind of guided input (example), so let’s keep that in mind as we’re making this update. But to be clear, for phase 1, we’re not planning on tackling the guided input aspect.

Figma file

cc @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021857439292509917630
• Upwork Job ID: 1857439292509917630
• Last Price Increase: 2025-01-02
• Automatic offers:
• shubham1206agra | Contributor | 105277860

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021857439292509917630

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @thesahindia (External)

[dannymcclain]

@JmillsExpensify any opinion on which project makes the most sense for this? I was thinking #retain but I will defer to the smart people!

[Pholenk]

Hi @dannymcclain I can't see the image and video attached. Can you reupload it, please?

[neonbhai]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Update Datepicker UX

What is the root cause of that problem?

Feature Request

What changes do you think we should make in order to solve the problem?

We will:

1. Wrap the Date Popover in a Modal

   • In DatePicker.tsx, wrap the date popover here with a <Modal> tag:
     

     App/src/components/DatePicker/index.tsx

     Lines 115 to 125 in 88713ab

     	<View
     	style={[styles.datePickerPopover, styles.border]}
     	collapsable={false}
     	>
     	<CalendarPicker
     	minDate={minDate}
     	maxDate={maxDate}
     	value={selectedDate}
     	onSelected={onSelected}
     	/>
     	</View>

   • The modal will have no backdrop and will appear only when the TextInput is focused.

2. Handle Focus State

   • Since we need the onFocus & onBlur prop added by InputWrapper, we will use the datePicker from a component that wraps it in InputWrapper
   • Introduce an isDatePopoverVisible state to toggle the popover visibility based on onFocus and onBlur events.

        onFocus={() => setIsDatePopoverVisible(true)}
        onBlur={() => setIsDatePopoverVisible(false)}

3. Autofocus Behavior

   • For date filters (e.g., in search), we will avoid auto-focusing the first date input to prevent hiding subsequent inputs using a prop shouldAutofocus
   • shouldAutofocus will betrue by default

[dannymcclain]

@Pholenk Just re-uploaded! Hopefully that worked. Those are pretty important to be able to see 😂

[daledah]

Edited by proposal-police: This proposal was edited at 2024-11-16 08:52:21 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

• New feature

What changes do you think we should make in order to solve the problem?

1. Base code change in DatePicker:

function DatePicker(
    {
        containerStyles,
        defaultValue,
        disabled,
        errorText,
        inputID,
        label,
        maxDate = setYear(new Date(), CONST.CALENDAR_PICKER.MAX_YEAR),
        minDate = setYear(new Date(), CONST.CALENDAR_PICKER.MIN_YEAR),
        onInputChange,
        onTouched,
        placeholder,
        value,
        shouldSaveDraft = false,
        formID,
    }: DatePickerProps,
    ref: ForwardedRef<BaseTextInputRef>,
) {
    const styles = useThemeStyles();
    const {translate} = useLocalize();
    // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
    const [selectedDate, setSelectedDate] = useState(value || defaultValue || undefined);
    const {shouldUseNarrowLayout} = useResponsiveLayout();

    useEffect(() => {
        // Value is provided to input via props and onChange never fires. We have to save draft manually.
        if (shouldSaveDraft && !!formID) {
            FormActions.setDraftValues(formID, {[inputID]: selectedDate});
        }

        if (selectedDate === value || !value) {
            return;
        }

        setSelectedDate(value);
    }, [formID, inputID, selectedDate, shouldSaveDraft, value]);

+    const show = useRef<() => void>();
+    const onSelected = (newValue: string) => {
+        onTouched?.();
+        onInputChange?.(newValue);
+        setSelectedDate(newValue);
+        hideTooltipRef.current?.();
+        ref?.current?.blur();
+    };
+    const hideTooltipRef = useRef<() => void>();

+    const [containerInputWidth, setContainerInputWidth] = useState();

+    const renderTooltipContent = useCallback(() => {
+        return (
+            <View
+                style={[styles.datePickerPopover, styles.border, {width: containerInputWidth, pointerEvents: 'auto', zIndex: +10000}]}
+                collapsable={false}
+            >
+                <CalendarPicker
+                    minDate={minDate}
+                    maxDate={maxDate}
+                    value={selectedDate}
+                    onSelected={onSelected}
+                />
+            </View>
+        );
+    }, [containerInputWidth, minDate, maxDate, selectedDate, onSelected]);

    return (
+        <View style={styles.datePickerRoot}>
+            <GenericTooltip
+                shouldUseOverlay
+                wrapperStyle={{backgroundColor: 'transparent'}}
+                renderTooltipContent={renderTooltipContent}
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                anchorAlignment={{horizontal: 'center', vertical: 'top'}}
+            >
+                {({showTooltip, hideTooltip, updateTargetBounds}) => {
+                    hideTooltipRef.current = hideTooltip;
+                    return (
+                        <View
+                            onLayout={(e: LayoutChangeEventWithTarget) => {
+                                // e.target is specific to native, use e.nativeEvent.target on web instead
+                                const target = e.target || e.nativeEvent.target;
+                                show.current = () => measureTooltipCoordinate(target, updateTargetBounds, showTooltip);
+                            }}
+                            style={[shouldUseNarrowLayout ? styles.flex2 : {}]}
+                        >
+                            <TextInput
+                                disableKeyboard
+                                onLayout={(e) => {
+                                    setContainerInputWidth(e.nativeEvent.layout.width);
+                                }}
+                                ref={ref}
+                                inputID={inputID}
+                                forceActiveLabel
+                                icon={Expensicons.Calendar}
+                                label={label}
+                                accessibilityLabel={label}
+                                role={CONST.ROLE.PRESENTATION}
+                                value={selectedDate}
+                                placeholder={placeholder ?? translate('common.dateFormat')}
+                                errorText={errorText}
+                                containerStyles={containerStyles}
+                                disabled={disabled}
+                                onFocus={() => show?.current?.()}
+                                onBlur={() => hideTooltip()}
+                            />
+                        </View>
+                    );
+                }}
+            </GenericTooltip>
+        </View>
+    );
}

Explains: I am using GenericTooltip to render the date picker. it will wrap the text input component. The similar is used here:

App/src/components/Tooltip/EducationalTooltip/BaseEducationalTooltip.tsx

Line 109 in 99bf554

<GenericTooltip

2. Then, in CalendarPicker, pass onMouseDown={(e) => e.preventDefault()} for each PressableWithFeedback such as:
   

   App/src/components/DatePicker/CalendarPicker/index.tsx

   Line 151 in 4bb19d7

   <PressableWithFeedback

   
   

   App/src/components/DatePicker/CalendarPicker/index.tsx

   Line 180 in 4bb19d7

   <PressableWithFeedback

   
   

   App/src/components/DatePicker/CalendarPicker/index.tsx

   Line 193 in 4bb19d7

   <PressableWithFeedback

   
   and
   

   App/src/components/DatePicker/CalendarPicker/index.tsx

   Line 236 in 4bb19d7

   <PressableWithoutFeedback

It will make sure the input is not blurred when we click on any button in the date picker.

3. Update the selected state of the date to match our designs (green background, bold text, with the same text color we use for our green buttons). => This part is very easy, can be addressed in PR phase.

4. Auto focus on input: Just need to useuseAutoFocusInput in where we want to focus. For example:

App/src/pages/settings/Profile/PersonalDetails/DateOfBirthPage.tsx

Line 72 in 99bf554

<InputWrapper

                    <InputWrapper ref={inputCallbackRef} /> 

    const {inputCallbackRef} = useAutoFocusInput()

What alternative solutions did you explore? (Optional)

Result

Screen.Recording.2024-11-27.at.17.28.40.mov

[Pholenk]

Edited by proposal-police: This proposal was edited at 2024-11-21 19:23:22 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Update Datepicker UX

What is the root cause of that problem?

UX enhancement

What changes do you think we should make in order to solve the problem?

• Add this line to track whether the input is focused, popover relative position, and container height

    const [isFocused, setIsFocused] = useState(false);
    const [popoverPosition, setPopoverPosition] = useState({
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
    });
    const [containerSize, setContainerSize] = useState({
        height: 50,
    });

to this line

App/src/components/DatePicker/index.tsx

Line 74 in 4bb19d7

• Add this line to set reference locally so the functionality of the popover and the text input is not dependent to the ref props

const localRef = useRef<BaseTextInputRef>(null);

• Add these lines to set popover show or hide dynamically

    const popoverDisplayStyle = useMemo(() => {
        if (isFocused) {
            return styles.datePickerPopoverShow;
        }

        return styles.datePickerPopoverHide;
    }, [isFocused, styles.datePickerPopoverHide, styles.datePickerPopoverShow]);

• Change the styles in here

+        datePickerRoot: {
-             position: 'relative',
-             zIndex: 99,
+            width: '100%',
+        },
+        datePickerPopoverShow: {
+            display: 'flex',
+        },
+
+        datePickerPopoverHide: {
+            display: 'none',
+        },

• To expose the reference of this component add these lines

useImperativeHandle(
        ref,
        () => {
            if (!localRef.current) {
                return {} as BaseTextInputRef;
            }
            return localRef.current;
        },
        [],
    );

• Add these lines to simplify the changes of isFocused state

const toggleFocus = useCallback(() => {
        setIsFocused((prevState) => !prevState);
    }, []);

• Change the component code

-        <View style={styles.datePickerRoot}>
-            <View style={[shouldUseNarrowLayout ? styles.flex2 : {}, styles.pointerEventsNone]}>
+        <View style={[styles.flex0, styles.datePickerRoot, containerSize]}>
+            <View style={[shouldUseNarrowLayout ? styles.flex2 : {}]}>
                <TextInput
-                    ref={ref}
+                   ref={localRef}
                    inputID={inputID}
                    forceActiveLabel
                    icon={Expensicons.Calendar}
                    label={label}
                    accessibilityLabel={label}
                    role={CONST.ROLE.PRESENTATION}
                    value={selectedDate}
                    placeholder={placeholder ?? translate('common.dateFormat')}
                    errorText={errorText}
                    containerStyles={containerStyles}
                    textInputContainerStyles={[styles.borderColorFocus]}
-                    inputStyle={[styles.pointerEventsNone]}
                    disabled={disabled}
-                    readOnly
+                    readOnly={false}
+                    disableKeyboard
+                    onFocus={toggleFocus}
+                    onBlur={toggleFocus}
+                    onLayout={onLayoutHandle}
                />
            </View>
            <View
-                style={[styles.datePickerPopover, styles.border]}
+                style={[styles.datePickerPopover, styles.border, popoverDisplayStyle, popoverPosition]}
                collapsable={false}
            >
                <CalendarPicker
                    minDate={minDate}
                    maxDate={maxDate}
                    value={selectedDate}
                    onSelected={onSelected}
                />
            </View>
        </View>

Result

Mobile

screencast-Genymotion-2024-11-21_23.54.13.555.mp4

Web

simplescreenrecorder-2024-11-22_02.14.18.mp4

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[daledah]

Proposal updated

[melvin-bot]

@dannymcclain, @thesahindia Whoops! This issue is 2 days overdue. Let's get this updated quick!

[dannymcclain]

@thesahindia are you the official proposal reviewer for this one?

[thesahindia]

@thesahindia are you the official proposal reviewer for this one?

Yeah, I am assigned as the C+.

[thesahindia]

Thanks for the proposals everyone! Could you guys please share the end results?

[Pholenk]

I've updated my proposal to add the video of the change result.

cc: @thesahindia

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[dannymcclain]

Not overdue. I think proposals are still being reviewed.

[melvin-bot]

@dannymcclain, @thesahindia Eep! 4 days overdue now. Issues have feelings too...

[thesahindia]

Thanks for the proposals everyone! Could you guys please share the end results?

cc: @daledah @neonbhai

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.1.28-15-staging and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Update Datepicker UX  #56068

If no regressions arise, payment will be issued on 2025-04-23. 🎊

For reference, here are some details about the assignees on this issue:

• @perunt does not require payment (Contractor)
• @shubham1206agra requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@shubham1206agra] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@kadiealexander] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[melvin-bot]

Triggered auto assignment to @trjExpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[kadiealexander]

Reassigning to handle payment as I'm heading OOO. Thanks for your help @trjExpensify!

[trjExpensify]

👋 @shubham1206agra can we get the checklist here please, and confirm the number of regressions? Sounds like just the 1 here, as the other here was observed in the PR for a follow-up.

[shubham1206agra]

👋 @shubham1206agra can we get the checklist here please, and confirm the number of regressions? Sounds like just the 1 here, as the other here was observed in the PR for a follow-up.

@trjExpensify The number of regression is 0 since this bug is repro on other inputs too #60243 (comment)

[trjExpensify]

Hm, but the RCA places that original PR at fault (CC: @daledah @mollfpr) of introducing it. If that PR wasn't the cause, what was?

[shubham1206agra]

This is a hidden bug that only appeared after the offending PR.

@trjExpensify Read this line

[shubham1206agra]

The offending PR was marked because we only focused on DatePicker at that time.

[trjExpensify]

Yeah, that line reads to me "this bug only appeared because of the offending PR".

[daledah]

I think that when implementing TextInput, there's no way to modify input values without focusing on the field, so we didn't put setTouchedInput inside onInputChange, which is the solution I proposed. So the culprit here could be #40757, as they created a way to "modify input values without focusing on the field" by adding clear button and overlooked this bug.

[trjExpensify]

So the culprit here could be #40757, as they created a way to "modify input values without focusing on the field" by adding clear button and overlooked this bug.

Hm, but the X is only shown when the the field is focused here:

Whereas with the DatePicker field it's displayed when not focused, which could be incorrect in itself? CC: @Expensify/design

[daledah]

Hm, but the X is only shown when the the field is focused here:

With input fields that is focused by default, the X will be shown without user interactions.

modify input values without focusing on the field

I've misused the word "focusing" here, what I meant was "user press/click to focus on the field"

[trjExpensify]

I've misused the word "focusing" here, what I meant was "user press/click to focus on the field"

Ah right, that makes way more sense. To rephrase:

So the culprit here could be #40757, as they created a way to modify input values when a field is focused by adding the clear button (X) and overlooked this bug.

[shubham1206agra]

Since this is a new feature. So, only tests are require.d

Test Case 1: Manual Date Selection and Clear Functionality
Steps:

1. Navigate to the Reports section.
2. Tap the Filter button.
3. Tap on the Date input field.
4. On a wide screen (web), a popup should appear. On mobile, a modal should appear instead.
5. Select a date from the DatePicker.
6. Confirm the DatePicker closes automatically after a date is selected.
7. Verify that a "Clear" (X) icon appears on the right side of the input once a date is chosen.
8. Tap the Clear (X) icon – the input should be cleared.

Test Case 2: Auto-Opening Date Picker in Settings Flow

1. Open the Settings screen.
2. Tap the Status button.
3. Tap the Clean After button.
4. Select Custom.
5. Tap the Date input field.
6. The DatePicker should automatically open upon focusing the date input field (since it’s the only element on the screen).
7. Tap Clear and verify the input field is cleared.

Since there's only one actionable field (the date input) on these screens, the DatePicker should open automatically. The date picker should be automatically opened on the next screen:

• DateOfBirthPage – under Personal Details
• SetDatePage – under Profile > Custom Status
• IncorporationDateBusiness – under Reimbursement
• IOURequestStepDate – under IOU Request flow
• EditReportFieldDatePage – when editing a report field with date
• DateOfBirthStep – under Reimbursement > Missing Personal Details

[trjExpensify]

Test Case 2: Auto-Opening Date Picker in Settings Flow

1. Open the Settings screen.
2. Tap the Status button.
3. Tap the Clean After button.
4. Select Custom.
5. Tap the Date input field.
6. The DatePicker should automatically open upon focusing the date input field (since it’s the only element on the screen).
7. Tap Clear and verify the input field is cleared.

Modifying this one. Typo in step 3, and step 5 is unclear you need to select the Date push row first to get to the date input screen.

Test Case 2: Auto-Opening Date Picker in Settings Flow

1. Open the Settings screen.
2. Tap the Status button.
3. Tap the Clear After button.
4. Select Custom.
5. Click the Date push row
6. Verify the Date input field is focused automatically (since it's the only element on the screen) and the DatePicker is revealed
7. Tap Clear and verify the input field is cleared.

[trjExpensify]

Payment summary as follows:

• $500 to @shubham1206agra for the C+ review

Offer sent.

[shubham1206agra]

@trjExpensify Offer accepted

[trjExpensify]

Paid, closing!