Skip to content

DatePicker goes backward through segments on Enter #5102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jenmak-tangelo opened this issue Sep 19, 2023 · 9 comments · May be fixed by #8279
Open

DatePicker goes backward through segments on Enter #5102

jenmak-tangelo opened this issue Sep 19, 2023 · 9 comments · May be fixed by #8279
Labels
bug Something isn't working rsp:DatePicker

Comments

@jenmak-tangelo
Copy link

Provide a general summary of the issue here

When the user hits Enter, the date picker focus moves from the last to the first date segment.

🤔 Expected Behavior?

The user should be able to hit enter and traverse through the segments and through to the next field.

😯 Current Behavior

The date picker focus moves from the last to the first date segment and you cannot get to the next field by hitting Enter in a form.

💁 Possible Solution

Add logic for the enter key to move focus through the segments.

🔦 Context

No response

🖥️ Steps to Reproduce

Go to the example: https://react-spectrum.adobe.com/react-aria/useDatePicker.html
Click on mm and hit Enter. See that it does nothing.
Tab to the year segment and hit Enter. See that it goes backward to the beginning.

Version

3.26.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

Mac OS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response
@jenmak-tangelo jenmak-tangelo changed the title DatePicker goes backward through segments onEnter DatePicker goes backward through segments on Enter Sep 19, 2023
@snowystinger
Copy link
Member

I see that. Looks like it is caused by https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/datepicker/src/useDatePickerGroup.ts#L97
Which will focus the first placeholder in the group. I've checked against the example, if I fill in the first segment and then repeat your steps, then the first placeholder is indeed focused.

I'm not sure this is a bug, if you were on the last segment of an empty field and pressed Enter, would it just stay on that last segment? It seems more useful for it to go to the first, that way a user can fill in each segment and the field will auto advance as the user types.

@jenmak-tangelo
Copy link
Author

jenmak-tangelo commented Sep 20, 2023 •
edited
Loading

I think that makes sense for when all fields are empty. But, the issue we are having in production is that when all of the fields are filled in and you press Enter, instead of taking you to the next focusable element outside of the date field, it takes you to the second to last segment.
(We want there to be consistency between the DatePicker and the TextField which currently has this Enter behavior.)

@LFDanLu
Copy link
Member

LFDanLu commented Sep 20, 2023

Related: #5032

@LFDanLu LFDanLu mentioned this issue Sep 21, 2023
Closed
@rodrigoschweitzer
Copy link

I think that makes sense for when all fields are empty. But, the issue we are having in production is that when all of the fields are filled in and you press Enter, instead of taking you to the next focusable element outside of the date field, it takes you to the second to last segment. (We want there to be consistency between the DatePicker and the TextField which currently has this Enter behavior.)

That's precisely what I'm facing in prod. In my case, I have only a date field in the form once I filled all segments and pressed Enter I'm expecting to submit the form instead of backing a segment.

@rodrigoschweitzer
Copy link

Is there any workarounds to this issue?

@LFDanLu LFDanLu added the bug Something isn't working label Sep 25, 2023
@github-project-automation github-project-automation bot moved this to ✏️ To Groom in RSP Component Milestones Sep 25, 2023
@LFDanLu
Copy link
Member

LFDanLu commented Sep 26, 2023

No workarounds short of modifying the press handler that @snowystinger shared via something like patch-package that I can think of.

@snowystinger
Copy link
Member

We would also accept a PR if you wanted to address this. See our contributing guide https://react-spectrum.adobe.com/contribute.html

@AgataJedryszek-da
Copy link

Is there an update on this?

@LFDanLu LFDanLu moved this from ✏️ To Groom to 🩹 To Triage in RSP Component Milestones Oct 30, 2024
@iamrakhmatov
Copy link

so unfortunate to see this bug still exists 🙁, I'm also having an issue w/ this

@devongovett devongovett linked a pull request May 21, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working rsp:DatePicker
Projects
RSP Component Milestones
Status: 🩺 To Triage
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: Do not move backward through DateField segments when pressing Enter adobe/react-spectrum
7 participants
@devongovett @snowystinger @rodrigoschweitzer @LFDanLu @iamrakhmatov @AgataJedryszek-da @jenmak-tangelo