Update date picker to allow typing in dates by Krishna2323 · Pull Request #101454 · Expensify/App

Krishna2323 · 2026-09-17T17:33:11Z

Explanation of Change

Fixed Issues

$ #101117
PROPOSAL:

Tests

Prereqs: Any account. Desktop Chrome and Safari, plus one touch device (mWeb or native).

On desktop, open Settings > Profile > Personal details > Date of birth and click the field.
Verify the calendar opens, the caret is in the year, and the YYYY-MM-DD mask and dashes show in grey.
Type 19900515. Verify focus moves year > month > day on its own and the calendar jumps to May 1990.
Clear the field and type 1990, then 3. Verify the month shows 03 and focus moves to the day.
Press Backspace until the day is empty, then once more. Verify focus moves back to the month.
Use Left/Right arrows and type - or /. Verify focus moves between segments.
Press Cmd/Ctrl+A. Verify the whole date is highlighted. Type 2. Verify the date is replaced starting at the year.
Press Cmd/Ctrl+A, then Backspace. Verify the field empties and focus is in the year.
Paste 2001-02-03 into the year. Verify all three segments fill.
Pick a month and then a year from the calendar header. Verify the field updates and the calendar stays open. Pick a day and verify it closes.
Type 2023-02-31 and tab out. Verify the digits stay and a validation error shows. Tabbing between segments must not show it.
Click the X. Verify the field empties and focus returns to the year.
Type 1990 and 1, then click the empty space right of the date. Verify focus lands in the month.
Open the calendar and scroll the page. Verify the calendar stays attached to the field.
In Safari and Chrome, verify the caret is not clipped after a full year.
With VoiceOver on, verify the segments read as Year, Month, Day with no repeated digits or mask letters.
Save the form and verify the date persists after reload.
On the touch device, tap the field. Verify only the calendar opens and no keyboard appears. Pick a month or year and verify the field value does not change until a day is picked.
Verify there are no JS console errors.

Verify that no errors appear in the JS console

Offline tests

Same as tests

QA Steps

Same as tests
Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

web_chrome.mp4

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

…calendar on focus Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

…gment Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

…rolls Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

…te field Signed-off-by: krishna2323 <belivethatkg@gmail.com>

melvin-bot · 2026-09-17T17:33:16Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

melvin-bot · 2026-09-18T18:19:27Z

Hey, I noticed you changed src/languages/en.ts in a PR from a fork. For security reasons, translations are not generated automatically for PRs from forks.

If you want to automatically generate translations for other locales, an Expensify employee will have to:

Look at the code and make sure there are no malicious changes.
Run the Generate static translations GitHub workflow. If you have write access and the K2 extension, you can simply click: [this button]

Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running:

npx bun ./scripts/generateTranslations.ts --help

Typically, you'd want to translate only what you changed by running npx bun ./scripts/generateTranslations.ts --compare-ref main

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

codecov · 2026-09-18T18:50:59Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/CONST/index.ts	`95.90% <ø> (ø)`
...nts/DatePicker/CalendarPicker/MonthPickerModal.tsx	`100.00% <100.00%> (ø)`
...ents/DatePicker/CalendarPicker/YearPickerModal.tsx	`100.00% <100.00%> (ø)`
src/components/DatePicker/CalendarPicker/index.tsx	`98.37% <100.00%> (+1.73%)`	⬆️
src/components/Form/FormContext.tsx	`40.00% <100.00%> (+15.00%)`	⬆️
src/components/Form/FormProvider.tsx	`72.40% <100.00%> (+0.91%)`	⬆️
...onents/MoneyRequestConfirmationFields/Provider.tsx	`100.00% <ø> (ø)`
...mponents/MoneyRequestConfirmationFields/context.ts	`80.00% <ø> (ø)`
...tConfirmationList/hooks/useConfirmationListData.ts	`98.87% <100.00%> (+0.01%)`	⬆️
...onfirmationList/hooks/useConfirmationValidation.ts	`90.47% <100.00%> (+0.23%)`	⬆️
... and 22 more
... and 14 files with indirect coverage changes

github-actions · 2026-09-21T00:20:00Z

🚧 dubielzyk-expensify has triggered a test Expensify/App build. You can view the workflow run here.

marufsharifi · 2026-10-16T07:27:36Z

BUG#1: The calendar and date input field are not synchronized.

marufsharifi · 2026-10-16T07:31:43Z

BUG#2: When a highlighted date segment try to cut using Cmd+X, its digits are copied to the clipboard, but the selected segment is not cleared from the date field.

RF-2.webm

marufsharifi · 2026-10-16T07:34:51Z

BUG#3: The cursor cannot move between individual digits using the arrow keys, whereas in the latest main branch, it moves between digits one by one.

RF-3.webm

marufsharifi · 2026-10-16T07:37:42Z

It should auto-complete, and it now does.

It doesn't seem to be fixed yet.

RF-4.webm

marufsharifi · 2026-10-16T07:40:29Z

@Krishna2323, could you please take a look at the above bugs reported. thanks.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

…the committed date Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 · 2026-10-18T21:57:47Z

@marufsharifi Fixed two issues and one needs a discussion.

BUG#2 (Cmd+X): Fixed. Cutting a single segment wasn't handled, so the field restored the old value.

BUG#3 (arrow keys): Intentional. Arrows move between segments, like a native date input.

Autocomplete: Fixed. After deleting a digit, the incomplete date wasn't committed. Picking the same date again didn't trigger an update. The calendar now notifies the segments even when the value stays the same.

BUG#1 (calendar/input sync): This also reproduces on main, so I don't think it belongs in this PR. The calendar clamps its view to minDate/maxDate, and the date in the screenshot is outside the allowed range.

heyjennahay

Product change 👍

marufsharifi · 2026-10-20T20:19:29Z

I've been testing this today. but i will complete my review tomorrow. thanks.

marufsharifi · 2026-10-20T20:20:07Z

@Krishna2323, could you please merge the main. thanks.

marufsharifi · 2026-10-21T10:36:35Z

@marufsharifi Fixed two issues and one needs a discussion.

BUG#2 (Cmd+X): Fixed. Cutting a single segment wasn't handled, so the field restored the old value.

BUG#3 (arrow keys): Intentional. Arrows move between segments, like a native date input.

Autocomplete: Fixed. After deleting a digit, the incomplete date wasn't committed. Picking the same date again didn't trigger an update. The calendar now notifies the segments even when the value stays the same.

BUG#1 (calendar/input sync): This also reproduces on main, so I don't think it belongs in this PR. The calendar clamps its view to minDate/maxDate, and the date in the screenshot is outside the allowed range.

@Krishna2323 based on what you have said here

Since the picker and input should be synchronized, selecting a year should populate the input without triggering a validation error.

This seems to be a regression: #101454

could you please take another look at both issues. thanks.

marufsharifi · 2026-10-21T10:40:42Z

BUG2: When manually entering a Year, for example 1990, typing the first dash (-) moves the focus directly to the day segment instead of advancing to the month segment. As a result, the month field remains empty.

2.mov

This doesn't seems to be fixed yet.

RF-1.webm

marufsharifi · 2026-10-21T10:47:05Z

BUG#1: Pressing Backspace when the month digits are highlighted replace it to 01 instead of clearing the selected month.

RF-2.webm

marufsharifi · 2026-10-21T10:51:14Z

BUG#2: When the user deletes the last digit of the year in the input field and then resizes the browser to a smaller screen size, the year automatically reverts to its previous value.

RF-3.webm

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

…elected segment Signed-off-by: krishna2323 <belivethatkg@gmail.com>

…he Delete key Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

The date field refuses to commit an entry it cannot read, so the error reaches the form from the input rather than from a value the form could validate. That path had no tests: the confirmation list's dateInvalid branch, the effect that clears the error once the entry reads as a date again, and FormProvider's merge of input reported errors, including which error wins when the page has a rule of its own. The calendar's inbound viewDate catch-up is what makes it follow a date being typed, and the count that carries each request is what lets the same month be asked for twice. Both are covered now, along with holding a month or year pick to the dates the calendar offers. Signed-off-by: krishna2323 <belivethatkg@gmail.com>

The hook owns focus movement, overwrite on arrival, the undo and redo stacks, copying and cutting across separate inputs, settling a half typed segment on blur, and the counted requests that keep the calendar in step. The pure helpers under it were already covered, but those are the part least likely to regress. Each segment is given a stand-in for its input, so which segment the caret moved to and what the browser has selected inside one are both readable without rendering the field. Signed-off-by: krishna2323 <belivethatkg@gmail.com>

…r one The required error, the error the field reports for an entry it could not read, and the two guards that keep either from being saved were written out in both pages that ask for a transaction start date. They now ask a hook instead, which is also where they are tested, rather than the same guard being covered three times over or not at all. The pages keep their own layout. One is a step in a flow with a loading state and a Next button, the other a settings page, and the date they mean by starting from the beginning differs, so a shared component would carry more switches than the duplication costs. Signed-off-by: krishna2323 <belivethatkg@gmail.com>

The calendar stays attached to the field while the page scrolls, and a month or year picker opened from inside it answers escape itself. Both are guards on shared popover code, and a regression in either would show up as the calendar vanishing mid edit. An overlay-free popover in a narrow pane is the other half of that, since the calendar has to sit beside a field in a right hand pane while still becoming a full modal on a small screen. Jest resolves the native variant of both components, which has none of these listeners, so the tests ask for the web one by the same route other tests use to ask for the native one. Signed-off-by: krishna2323 <belivethatkg@gmail.com>

…date end to end Each segment is its own input, so the field only counts as left once focus lands outside all three. The space beside the date holds no text, so a repeated click there stands in for the word or the line a text field would have selected. The typing itself is covered through the field rather than through the hook alone: a whole date reaching the form, a half written one withheld, the digits showing as they are typed, the calendar opening on the first of them, and a date outside the offered range reporting an error. Typing is only offered without a touch screen and with room beside the field, so both are mocked the way the numeric input's tests already mock the first. Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 · 2026-10-25T19:49:20Z

@marufsharifi all the comments/issues are handled, ready for review again.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 added 11 commits September 17, 2026 20:17

feat: allow typing a date into the date field, one segment at a time

c306f00

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: reach the overlay-free popover from a narrow pane, and open the …

79a94e8

…calendar on focus Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: keep the date mask a fixed width and track the caret per digit

de3a085

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: match the prototype's segment rules for typed dates

59e4711

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: do not drag the calendar to the date limit while a year is typed

0d46d4f

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: fill the month and day from the right so a single digit shows as 02

b13855f

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: send a click on the field's empty space to the first unfilled se…

b9896d6

…gment Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: hide the calendar icon once a digit is typed

905605a

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: keep the typing calendar attached to its field while the page sc…

7d4f9c6

…rolls Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: keep the calendar open while the year or month picker is used

fc6df11

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

refactor: remove the workarounds that accumulated around the typed da…

6010595

…te field Signed-off-by: krishna2323 <belivethatkg@gmail.com>

melvin-bot Bot assigned Krishna2323 Sep 17, 2026

Krishna2323 added 2 commits September 17, 2026 23:24

feat: update the date field when a month or year is picked

cf9bbd1

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: stop a stray caret report moving the date field's active segment

6848a74

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 mentioned this pull request Sep 18, 2026

Update date picker to allow typing in dates #101117

Open

Krishna2323 added 7 commits September 18, 2026 23:06

refactor: rebuild the date field as one input per segment

c534524

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: measure each date segment instead of estimating its width

8f9b152

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: show the committed date when the date field is not being edited

1f44f08

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: let a press land on the date segment it was aimed at

d3068c3

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: stop the date field's props being dropped by the segmented input

1d90b46

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: land the caret at the end of a date segment reached by keystroke

996c988

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: reposition the calendar when the date field changes height

62993b7

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 added 3 commits September 18, 2026 23:58

fix: keep a committed date from restarting the segment being typed

aa094c3

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: drop a date segment keystroke that cannot complete a leading zero

6970cff

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

feat: keep the unreached mask letters on screen while a date is typed

c763339

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

This comment has been minimized.

Sign in to view

stephanieelliott removed their request for review October 15, 2026 22:19

Krishna2323 added 2 commits October 19, 2026 02:45

Merge branch 'main' into krishna2323/issue-101117

5aeb011

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: paste over a selected date, cutting one segment, and re-picking …

538d9b9

…the committed date Signed-off-by: krishna2323 <belivethatkg@gmail.com>

heyjennahay previously approved these changes Oct 19, 2026

View reviewed changes

marufsharifi suggested changes Oct 21, 2026

View reviewed changes

Krishna2323 added 2 commits October 25, 2026 10:20

Merge branch 'main' into krishna2323/issue-101117

f5fea3c

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

fix: clamp a month or year pick, skip a dead separator, and clear a s…

017bea5

…elected segment Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 dismissed heyjennahay’s stale review via 017bea5 October 25, 2026 05:35

Krishna2323 added 7 commits October 25, 2026 11:20

refactor: name the date field's handlers for what they do and share t…

21b6201

…he Delete key Signed-off-by: krishna2323 <belivethatkg@gmail.com>

test: cover the date range validator and the zero segment settling

e476d8a

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Krishna2323 requested a review from marufsharifi October 25, 2026 19:49

fix: drop a lint suppression that had nothing left to suppress

9728b6d

Signed-off-by: krishna2323 <belivethatkg@gmail.com>

Conversation

Krishna2323 commented Sep 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot Bot commented Sep 17, 2026

Uh oh!

melvin-bot Bot commented Sep 18, 2026

Uh oh!

codecov Bot commented Sep 18, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions Bot commented Sep 21, 2026

Uh oh!

This comment has been minimized.

marufsharifi commented Oct 16, 2026

Uh oh!

marufsharifi commented Oct 16, 2026

Uh oh!

marufsharifi commented Oct 16, 2026

Uh oh!

marufsharifi commented Oct 16, 2026

Uh oh!

marufsharifi commented Oct 16, 2026

Uh oh!

Krishna2323 commented Oct 18, 2026

Uh oh!

heyjennahay left a comment

Choose a reason for hiding this comment

Uh oh!

marufsharifi commented Oct 20, 2026

Uh oh!

marufsharifi commented Oct 20, 2026

Uh oh!

marufsharifi commented Oct 21, 2026

Uh oh!

marufsharifi commented Oct 21, 2026

Uh oh!

marufsharifi commented Oct 21, 2026

Uh oh!

marufsharifi commented Oct 21, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Krishna2323 commented Oct 25, 2026

Uh oh!

This branch has not been deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Krishna2323 commented Sep 17, 2026 •

edited

Loading

codecov Bot commented Sep 18, 2026 •

edited by github-actions Bot

Loading