🐛 Selection change when selectable list focuses

[alirezamirian]

Provide a general summary of the issue here

When using useSelectableCollection with selectOnFocus set to true and with some selected keys, focusing the list for the first time changes the selection. It's easier to see it in action in the codesandbox linked below.

🤔 Expected Behavior?

When focusedKey is initialized upon first focus, the focused item should also be selected if selectOnFocus is true, but only if the focus is going to a key not already selected. i.e focusing a collection with initially selected items should not have the side effect of selection being changed.

😯 Current Behavior

Initial non-empty selection can change upon focus.

💁 Possible Solution

The bug is in the code that tries to initialize focusedKey upon the first focus:

react-spectrum/packages/@react-aria/selection/src/useSelectableCollection.ts

Lines 346 to 364 in 326f481

	if (manager.focusedKey == null) {
	let navigateToFirstKey = (key: Key | undefined | null) => {
	if (key != null) {
	manager.setFocusedKey(key);
	if (selectOnFocus) {
	manager.replaceSelection(key);
	}
	}
	};
	// If the user hasn't yet interacted with the collection, there will be no focusedKey set.
	// Attempt to detect whether the user is tabbing forward or backward into the collection
	// and either focus the first or last item accordingly.
	let relatedTarget = e.relatedTarget as Element;
	if (relatedTarget && (e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING)) {
	navigateToFirstKey(manager.lastSelectedKey ?? delegate.getLastKey?.());
	} else {
	navigateToFirstKey(manager.firstSelectedKey ?? delegate.getFirstKey?.());
	}
	} else if (!isVirtualized && scrollRef.current) {

If the key passed to navigateToFirstKey is either manager.lastSelectedKey or manager.firstSelectedKey selection should not be toggled, as the item that's about to get focused is already selected.

See #7513

🔦 Context

No response

🖥️ Steps to Reproduce

Self explanatory sandbox: https://codesandbox.io/p/sandbox/blissful-joliot-gysfg2

Version

@react-aria/[email protected]

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

macOS

🧢 Your Company/Team

https://github.com/alirezamirian/jui

🕷 Tracking Issue

No response

[snowystinger]

Seems reasonable. I see Outlook's selection works like this, as does Mac Finder if I change windows and come back.
I don't quite know if I fully consider it a bug yet.