search

adobe / react-spectrum

A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
https://react-spectrum.adobe.com
Apache License 2.0
12.98k stars 1.13k forks source link

DatePicker goes backward through segments on Enter #5102

Open jenmak-tangelo opened 1 year ago

jenmak-tangelo commented 1 year ago

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

snowystinger commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Related: https://github.com/adobe/react-spectrum/issues/5032

rodrigoschweitzer commented 1 year ago

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 commented 1 year ago

Is there any workarounds to this issue?

LFDanLu commented 1 year ago

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

snowystinger commented 1 year ago

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 commented 1 month ago

Is there an update on this?

iamrakhmatov commented 2 days ago

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