[useRangeCalendar] Whether behavior of "Stop range selection" is a right design?

[QzCurious]

How I think it's not a right design

As a user, I would not expect that clicking on title of calendar, empty cell or anywhere outside the calendar would affect my selection. But:

Screen.Recording.2024-01-16.at.11.02.02.PM.mov

The running code is an example from docs

Digging into source code I found the code doing that

react-spectrum/packages/@react-aria/calendar/src/useRangeCalendar.ts

Lines 66 to 71 in 4ae2831

	// Also stop range selection on blur, e.g. tabbing away from the calendar.
	res.calendarProps.onBlur = e => {
	if ((!e.relatedTarget || !ref.current.contains(e.relatedTarget)) && state.anchorDate) {
	state.selectFocusedDate();
	}
	};

The problem is that e.relatedTarget would be body if I clicked a un-focusable element. So !ref.current.contains(e.relatedTarget) would be true and so my selection will be fulfilled by the code.

Real world example for interacting on title, empty cell, etc.

I want to make a scrollable RangeCalendar as Booking.com:

Screen.Recording.2024-01-16.at.11.28.22.PM.mov

Here's a codesandbox with useRangeCalendar (modified from the code example):

Screen.Recording.2024-01-16.at.11.37.30.PM.mov

But when I scroll RangeCalendar by "finger" it select the same day as end day. I can hardly select range across multiple months "on mobile". It is caused by endDragging, which has similar behavior to onBlur aforementioned.

react-spectrum/packages/@react-aria/calendar/src/useRangeCalendar.ts

Lines 41 to 61 in 4ae2831

	let endDragging = (e: PointerEvent) => {
	if (isVirtualClick.current) {
	isVirtualClick.current = false;
	return;
	}
	state.setDragging(false);
	if (!state.anchorDate) {
	return;
	}
	let target = e.target as Element;
	let body = document.getElementById(res.calendarProps.id);
	if (
	body &&
	body.contains(document.activeElement) &&
	(!body.contains(target) || !target.closest('button, [role="button"]'))
	) {
	state.selectFocusedDate();
	}
	};

A possible work around

I've add some comment on my code that overwrite onBlur to noop and re-implement to behavior by detecting outside click.
It's just a simple work around. Not considering tabbing, the onPress logic, etc.

I was wrong about the work around. It only fix onBlur part, which is possible to be overwrited.

[LFDanLu]

I think #3738 (comment) had an interesting idea for handling this where we should ignore blur events that happen as a result of an interaction within the RangeCalendar's containing modal. Of course there is still the issue where you could be pressing on a non-focusable element like you've shown here so maybe we could try to improve detection here or disable this blur behavior as a whole when in a modal and instead tie it to the modal's closure instead.

[QzCurious]

I'm closing this as my goal is to make a mobile-scrollable-multi-month calendar. But I made it too vague. Virtually, touch-scrolling a calendar is not necessary related to clicking, tabbing out a calendar.

A new issue with PR for on touch-scroll only: #5975