Skip to content
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.

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

Date pickers lose time zone when using the calendar after values are cleared #6005

Closed
Stanaland-Michael-bah opened this issue Mar 5, 2024 · 4 comments · Fixed by #7069
Closed
Assignees
Labels
bug Something isn't working help wanted Extra attention is needed rsp:DatePicker

Comments

@Stanaland-Michael-bah
Copy link

Provide a general summary of the issue here

When a date picker is supplied a ZonedDateTime as a value or defaultValue, if the user clears out the date and/or time value (by either backspacing over the field values or by clicking a "clear dates" button), then choses a new date from the popup calendar, the internal state value looses the time zone information and becomes a CalendarDateTime.

removing.time.mov
removing.date.mov

🤔 Expected Behavior?

The internal state value type should persist regardless of editing (If it starts out as a ZonedDateTime, it should stay a ZonedDateTime)

😯 Current Behavior

See general summary. There is a work-around: If you provide a placeholderValue, the time zone will persist

workaround.mov

💁 Possible Solution

Maybe a similar issue that was fixed in useTimeFieldState here:
https://github.com/adobe/react-spectrum/pull/4715/files

🔦 Context

No response

🖥️ Steps to Reproduce

You can use this fork of the useDatePicker Tailwind CSS example:
https://codesandbox.io/p/sandbox/gifted-vaughan-9n2wfm?file=%2Fsrc%2FApp.js

The only thing that was changed was to swap the DatePicker's defaultValue for an absolute date

  1. Backspace over the hours and minutes

  2. Open the calendar dialog and choose a new date
    time zone is lost, value becomes a CalendarDateTime

  3. Backspace over the year, month and day

  4. Open the calendar dialog and choose a new date
    time zone is lost, value becomes a CalendarDateTime

Workaround:

  1. Add a placeholderValue that is a ZonedDateTime
  2. Repeat the steps above
    time zone persists as expected

Version

"react-stately": "^3.30.1", "react-aria": "^3.32.1",

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge

If other, please specify.

No response

What operating system are you using?

MacOS 14.3.1

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

@LFDanLu
Copy link
Member

LFDanLu commented Mar 6, 2024

Thanks for reporting this, reproduced locally. This was partially fixed via #4715, that PR might help point to where we would want to investigate further.

@LFDanLu LFDanLu added bug Something isn't working help wanted Extra attention is needed rsp:DatePicker labels Mar 6, 2024
@boutahlilsoufiane
Copy link
Contributor

Hi @LFDanLu I will work on this.

@LFDanLu
Copy link
Member

LFDanLu commented Sep 3, 2024

Sure, thanks! Let us know if you need any help or guidance.

@boutahlilsoufiane
Copy link
Contributor

@LFDanLu Could you please check #7069

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed rsp:DatePicker
Projects
None yet
3 participants