RangeCalendar visually showing selected day from previous month

[ruijdacd]

🐛 Bug Report

When using the RangeCalendar component, when selecting a date in for example the month of July and then moving to next month, the component will visually present a range already selected until that day.

🤔 Expected Behavior

When navigating to other months, the user shouldn't be presented with a selected range of days, unless both dates are selected.

😯 Current Behavior

If selecting a date for example 14th of July, and then moving to August it will show that the range from 1st till 14th as selected).

💁 Possible Solution

🔦 Context

💻 Code Sample

Example on react spectrum page for RangeCalendar component.

🌍 Your Environment

Software	Version(s)
react-spectrum
Browser
Operating System

🧢 Your Company/Team

🕷 Tracking Issue (optional)

[LFDanLu]

This is intentional behavior, the RangeCalendar displays a "selected" range when moving to different months as a visual affordance reminding the user that a range selection is in progress.

[ruijdacd]

I see. Is there any way to differentiate that from when there is a selection in place?

Perhaps it would be nice to offer isHighlighted, so that we can apply a different style to those dates to better differentiate from the selected state.

const { isSelected, isHighlighted } = useCalendarCell();

[devongovett]

You could check to see if state.anchorDate is set. If so, it means that a selection is in progress.

[ruijdacd]

Sorry for the delayed response firstly, and thank you for your help!

I'll play around with this and see how beneficial it is to forcefully remove the visual guidance when selecting a range.