Calendar does not react to a change of value if lands in prev/next month

[coreylight]

🐛 Bug Report

When programmatically changing the value for DatePicker (or DateRangePicker), if the day/range lands in the previous month, the UI does not show the correct selected month.

🤔 Expected Behavior

The UI should update to show the picked day/range when value updates.

😯 Current Behavior

Month does not switch.
See Codesandbox example

🔦 Context

We need the UI to update correctly. While the DatePicker assumes that the popover will be closed when choosing a new value, this is not true for our use case.

💻 Code Sample

See Codesandbox example

🌍 Your Environment

Software	Version(s)
react-spectrum	3.20.0
Browser	Chrome 104.0.5112.79
Operating System	OSX Monterey

🧢 Your Company/Team

Mastery Logistics Systems

[snowystinger]

Interesting that it isn't updating.

I think a good workaround for this right now is to let the DatePicker close when you interact with something outside of it. Only the popover should be interacted with. This is the case for Assistive Technologies, screen readers, they can't get to anything outside the popover. The popover must be closed before anything else on the page can be interacted with.

If you close the popover when you interact outside, then reopen it after you've clicked the previous month button, it will show the updated month.

[coreylight]

@snowystinger that makes sense to me. I'm trying to implement relative selections as you see here:

I know it's not typical of the folks using this library, but if there was a relatively simple fix to get the calendar to be reactive I'd love to get it working 😃

[snowystinger]

Thanks for the extra context! That isn't something that spectrum currently defines. So it may be that you need to implement some extra things as a result/you may find other cases we don't support. Still odd our calendar doesn't update, that seems like a bug at least. I'll bring it up to our team.

[snowystinger]

Thanks for the extra context! That isn't something that spectrum currently defines. So it may be that you need to implement some extra things as a result/you may find other cases we don't support. Still odd our calendar doesn't update, that seems like a bug at least. I'll bring it up to our team.

[LFDanLu]

We can take a look at supporting this in DatePicker but if you are using the aria hooks to create your own DatePicker you can try using the focusedValue prop in useCalendar fix this behavior.

[kamami]

Did you find a solutions for this? I can not make it work with focusedValue. Sometime focusedValue returns a boolean... I don't think this is intended.

[devongovett]

This no longer applies in the current version of RSP. There is now an underlay behind popovers, so you can't click items outside the popover without closing it.