[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 😂