diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx index 80a7dad31..a6d71a150 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -187,13 +187,18 @@ const Trigger = forwardRef( {selectedValues.length > 0 ? ( ({ id: value, value, filtered: sortable }))} + list={selectedValues.map(value => ({ + id: `multi-select-${id}-${value}`, + value, + filtered: sortable, + }))} setList={() => null} onEnd={e => { const { newDraggableIndex, oldDraggableIndex } = e; if ( typeof newDraggableIndex === "number" && - typeof oldDraggableIndex === "number" + typeof oldDraggableIndex === "number" && + oldDraggableIndex !== newDraggableIndex ) { const temp = selectedValues[oldDraggableIndex]; selectedValues[oldDraggableIndex] = selectedValues[newDraggableIndex]; @@ -201,8 +206,9 @@ const Trigger = forwardRef( updateValues([...selectedValues]); } }} + revertOnSpill > - {selectedValues.map((value, index) => { + {selectedValues.map(value => { const nodeProps = getValueProps(value); let otherProps: BadgeProps = { text: nodeProps.children, @@ -220,7 +226,7 @@ const Trigger = forwardRef( } as DismissibleBadge; } return ( -
+