Multiselect dropdown closes unexpectedly when deselecting last selected item

[joshhunt]

We are using useMultipleSelection with useCombobox to create a multiselect dropdown that keeps selected items visible in the menu.

When clicking an item in the menu that's already selected, and that item is last in the selectedItems list, the dropdown unexpectedly closes. This appears to be caused by the focus management logic in useMultipleSelection which seems to be built with the assumption that you can only remove items via the selected item 'pills'?

It looks like the relevant code is

downshift/src/hooks/useMultipleSelection/reducer.js

Lines 75 to 89 in 59d3498

	case stateChangeTypes.FunctionRemoveSelectedItem: {
	let newActiveIndex = activeIndex
	const selectedItemIndex = selectedItems.findIndex(
	item => props.itemToKey(item) === props.itemToKey(selectedItem),
	)
	if (selectedItemIndex < 0) {
	break
	}
	if (selectedItems.length === 1) {
	newActiveIndex = -1
	} else if (selectedItemIndex === selectedItems.length - 1) {
	newActiveIndex = selectedItems.length - 2
	}

and

downshift/src/hooks/useMultipleSelection/index.js

Lines 68 to 72 in 59d3498

	if (activeIndex === -1 && dropdownRef.current) {
	dropdownRef.current.focus()
	} else if (selectedItemRefs.current[activeIndex]) {
	selectedItemRefs.current[activeIndex].focus()
	}

I don't yet have a minimal standalone reproduction, but our component is here https://github.com/grafana/grafana/blob/cf631d0c9f5f8cb07f2988bc3de3b713adee1c58/packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx

If a standlone reproduction would help, let me know and ill try and get one up on stackblitz or something.

I'm happy to contribute a fix, but I don't completely understand the downshift code i linked to, or understand exactly what causes the problem, so I would need some pointers.

[silviuaavram]

Hey @joshhunt. To clarify, what are you clicking and what's your expected result?

From your description, you are probably using removeSelectedItem when you click an item in the dropdown that is selected. Maybe just use the controlled component like in the example we are showing?

https://www.downshift-js.com/use-multiple-selection#usage-with-combobox

We are using removeSelectedItem only on the delete icon click, although it can very well be swapped with setSelectedItems and remove that item manually. Let me know if this helps, I'm going to close the issue for now. Thanks!