useMultipleSelection: Can't remove items when selectedItems is controlled

[andrewn]

• downshift version: 5.4.2
• node version: 12.16.1 (but can reproduce on Code Sandbox)
• npm (or yarn) version: 6.13.4

Relevant code or config

  const {
    getSelectedItemProps,
    getDropdownProps,
    addSelectedItem,
    removeSelectedItem
  } = useMultipleSelection({
    selectedItems, // selectedItems is controlled outside the component
    onSelectedItemsChange // this is not called when removeSelectedItem() is used
  });

What you did:

I'm using useMultipleSelection with selectedItems in controlled mode. This is so I can have external forms drive the Combobox state.

What happened:

Calling removeSelectedItem(item) to remove an item in the selection doesn't call onSelectedItemsChange and so the controlled selectedItems is never updated. The result is that the item cannot be removed.

Reproduction repository:

I forked the useMultipleSelection demo.

Problem description:

I added a stateReducer to log what happens. Clicking on the item that calls removeSelectedItem(item) causes the following reducer changes, in order:

type	state.selectedItems	changes.selectedItems
__function_remove_selected_item__	["Neptunium", "Plutonium", "Dubnium"]	["Plutonium", "Dubnium"]
selected_item_click	["Neptunium", "Plutonium", "Dubnium"]	["Neptunium", "Plutonium", "Dubnium"]

Suggested solution:

It seems that the click action is overwriting the result of removing the selected item.

[ben-styling]

I got around this issue by moving the remove element with the click handler to remove outside of the element with getSelectedItemProps

See below:

{selectedItems.map((selectedItem, index) => (
  <>
    <span
      style={selectedItemStyles}
      key={`selected-item-${index}`}
      {...getSelectedItemProps({ selectedItem, index })}
    >
      {selectedItem}
    </span>
    <span
      style={selectedItemIconStyles}
      onClick={() => removeSelectedItem(selectedItem)}
    >
      &#10005;
    </span>
  </>
))}

[silviuaavram]

Hi! I updated the example to include a stop propagation on the click event, as it was caught by the handler in the item otherwise. Can you update your use case to reflect this?

[andrewn]

Hi @silviuaavram, I don't see your updated example?

[ben-styling]

@andrewn Add onClick={e => { e.stopPropagation() }} to your span element with getSelectedItemProps on it.

https://codesandbox.io/s/usemultipleselection-combobox-usage-8enbh?file=/src/index.js

[silviuaavram]

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