Menu: In multiple selection mode, on pressing escape, all options are deselected.

[gundahimaja]

🐛 Bug Report

On pressing escape on menu in multiple selection mode, all options get deselected and menu gets closed.

🤔 Expected Behavior

On pressing escape on menu, menu should get closed and options should not be deselected.

😯 Current Behavior

On pressing escape on menu in multiple selection mode, all options get deselected and menu gets closed.

💻 Code Sample

https://codesandbox.io/s/vibrant-cache-ddnk7o?file=/src/App.js

On pressing escape, already selected options get deselected and menu gets closed.

🌍 Your Environment

Software	Version(s)
react-spectrum	3.23.0
Browser	Google Chrome
Operating System	macOS Monterey

🧢 Your Company/Team

Packages tab of Adobe Admin console

[reidbarber]

We might want to consider updating Menu to match Picker and ComboBox's behavior:

react-spectrum/packages/@react-aria/menu/src/useMenu.ts

Lines 60 to 67 in aa41650

	let {listProps} = useSelectableList({
	...otherProps,
	ref,
	selectionManager: state.selectionManager,
	collection: state.collection,
	disabledKeys: state.disabledKeys,
	shouldFocusWrap
	});

react-spectrum/packages/@react-aria/combobox/src/useComboBox.ts

Line 102 in aa41650

disallowEmptySelection: true,

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

Lines 223 to 227 in aa41650

	case 'Escape':
	e.preventDefault();
	if (!disallowEmptySelection) {
	manager.clearSelection();
	}

[majornista]

I agree, we should disallowEmptySelection. This behavior can be reproduced in our docs as well: https://react-spectrum.adobe.com/react-spectrum/Menu.html#selection. If you expand the menu to see what is selected, and then press Esc to close without changing the selection, selection is cleared before closing, regardless of the selectionMode.

[devongovett]

disallowEmptySelection isn't quite right because that also prevents users from deselecting the last selected item by pressing it.

[majornista]

This issue can be reproduced in some unexpected places, like ActionGroup > Collapsing behavior > Selection.

I think we need to remove behavior where Escape key deselects items in useSelectableCollection. Escape key doesn’t seem to be used to deselect items in a list, tree, or grid anywhere in WAI-ARIA APG: https://www.google.com/search?q=site:www.w3.org/WAI/ARIA/apg/+Escape.

[awkawk]

Typically hitting escape will restore a control that can be opened (e.g., menu, calendar) to the previous state. This seems to only be an issue with multiple select or range-select controls since in many cases selecting a new item in a single item select closes the select and completes the change. Escape certainly shouldn't be deselecting items that were chosen in a previous interaction.

[devongovett]

I think there is some nuance here. Within a menu, it is probably a bug, but in other collections like TableView and ListView, it is useful for users to have a way to quickly deselect many items at once. If you have a large collection of hundreds of items, and select all, or even select a large range via the shift modifier, there is no way to undo this other than manually clicking every item again. Escape is a useful shortcut to do this.

We can choose to remove this behavior for certain components like menu that commonly have another behavior for Escape already. It is much less likely to have a large number of items selected in a menu vs other collection components like a table. If such components appear within an overlay such as a popover or dialog, we could implement something like combobox does – the first press of Escape clears the selection, and a second (if nothing is selected) allows propagation to close the overlay.