RangeCalendar: When one date selected

[thorbde]

Provide a general summary of the issue here

When selecting a date in RangeCalendar, and not having moved the cursor yet, the one date that is in selection acts as a [data-selection-end]. This causes styling issues for us:

🤔 Expected Behavior?

I expect this cell to act as a [data-selected] before the selection is extended, as React Aria can't predict which direction the user will drag the selection.

😯 Current Behavior

React Aria predicts that the cell should act as [data-selection-end]

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

Current CSS implementation:

&[data-selected] {
          color: INTERNAL COLOR VARIABLE;
          background: INTERNAL COLOR VARIABLE;

          &:hover {
            background: INTERNAL COLOR VARIABLE;
          }
        }
&[data-selection-start],
&[data-selection-end] {
          color: INTERNAL COLOR VARIABLE;
          /** This is to have two backgrounds, see screenshot above */
          &::after {
                    background: INTERNAL COLOR VARIABLE;
          }
}

Version

React-Aria-Components

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 Sonoma 14.0

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[LFDanLu]

We could perhaps change this line to have a && state.value != null check since I believe value is only defined once a range is fully selected:

react-spectrum/packages/react-aria-components/src/Calendar.tsx

Line 486 in 75417bb

isSelectionEnd = isSameDay(date, state.highlightedRange.end);

From a brief glance, this doesn't seem to break any of our existing styles

[ananta]

@LFDanLu I would love to work on this issue :)

[LFDanLu]

@ananta sure, go for it!

[abdullahtariq1171]

I tried reproducing it but couldn't. Could you provide sandbox of your example? @thorbde

Here is my reproduction attempt https://codesandbox.io/p/sandbox/condescending-microservice-5j63r8

When selecting a date using cursor click, it returns {isSelected: true, isSelectionStart: true, isSelectionEnd: true} . This looks correct behavior to me since it automatically moves the selection to next date as end date.

and keyboard by pressing space, it returns {isSelected: true, isSelectionStart: true, isSelectionEnd: false}

cc: @LFDanLu

[LFDanLu]

I believe @thorbde's original ask was for isSelectionEnd to be false on cursor click (and by extension data-selection-end would also be false). As you've noted above, a date currently has isSelectionEnd: true when first clicked. This might be a breaking change to make now though since RAC has been fully release though and people might be relying on the current behavior though...

[thorbde]

@LFDanLu
You may close this issue, we were able to solve it for our use case