diff --git a/src/Components/Form/MultiSelectMenuV2.tsx b/src/Components/Form/MultiSelectMenuV2.tsx index 25cd226e09e..ecb7416b5fe 100644 --- a/src/Components/Form/MultiSelectMenuV2.tsx +++ b/src/Components/Form/MultiSelectMenuV2.tsx @@ -61,9 +61,6 @@ const MultiSelectMenuV2 = (props: Props) => { if (selectedOptions.length === 0) return placeholder; if (props.renderSelectedOptions) return props.renderSelectedOptions(selectedOptions.map((o) => o.option)); - return ( - {`${selectedOptions.length} item(s) selected`} - ); }; return ( @@ -89,17 +86,30 @@ const MultiSelectMenuV2 = (props: Props) => {

+ + {selectedOptions.length !== 0 && ( +
+ {selectedOptions.map((option) => ( + { + const updatedOptions = selectedOptions.filter( + (selectedOption) => + selectedOption.value !== option.value + ); + props.onChange( + updatedOptions.map((o) => o.value) as any + ); + }} + /> + ))} +
+ )} - {selectedOptions.length !== 0 && ( -
- {selectedOptions.map((option) => ( - - ))} -
- )} @@ -154,7 +164,7 @@ interface MultiSelectOptionChipProps { export const MultiSelectOptionChip = (props: MultiSelectOptionChipProps) => { return ( -

{props.label}

+

{props.label}

{props.onRemove && (