Removing items in react-select with MultiValueContainer - reactjs

Question

I am using react-select to implement a multi-value drop down but using our internal UI component library to render the selected values in the input box. I am overriding the MultiValueContiner with our component. It renders fine, I can select items and they are added and rendered in the input box. The problem is with removing items. What can I access from the onClick handler of the component to remove it from the currently selected options? Do I simply need to add the currentValue & setCurrentValue state accessors to each menu option items and access through e.g. props.data.setCurrentValue()?
Custom MultiValueContainer
import { useState } from 'react';
import Select, { InputActionMeta, components, MultiValueGenericProps, MultiValue, ActionMeta } from 'react-select';
// import component from internal UI lib, dummy import here
import MyUIObject from './MyUIObject';
interface MenuOption {
value: string;
label: string;
}
export interface Props {
title: string;
items: MenuOption[];
}
const MyUIObjectValueContainer = (props: MultiValueGenericProps<MenuOption>) => {
return (
<components.MultiValueContainer {...props}>
<MyUIObject
text={props.data.label}
onClick={ (e) => {
e.stopPropagation();
e.preventDefault();
// HOW TO REMOVE FROM SELECTED OPTIONS ???
}}
/>
</components.MultiValueContainer>
);
};
function MyCustomMultiSelect(props: Props) {
const [inputValue, setInputValue] = useState('');
const [currentValue, setCurrentValue] = useState<MenuOption[]>([]);
function handleInputChange(newValue: string, actionMeta: InputActionMeta) {
if (actionMeta.action === 'input-change') {
setInputValue(newValue);
}
}
// clear manually typed search string from input
function handleOnBlur() {
setInputValue('');
}
function handleOnChange(newValue: MultiValue<MenuOption>, actionMeta: ActionMeta<MenuOption>) {
setCurrentValue( newValue as MenuOption[] );
}
return (
<Select
isMulti
isClearable
isSearchable
options={props.items}
closeMenuOnSelect={false}
onInputChange={handleInputChange}
inputValue={inputValue}
onBlur={handleOnBlur}
components={{ MultiValueContainer: MyUiObjectValueContainer }}
value={currentValue}
onChange={handleOnChange}
/>
);
}
export default MyCustomMultiSelect;

Answer 1

You haven't shared the code for your custom option component, so I'm assuming you built it correctly and made sure react-select's props are being spread into the custom component react-select docs.
In the case of multi select, the state you manage should be an array of selected options containing a label and an id properties. When you click on a selected option to remove it, react-select returns a new array of selected values with the option you clicked on filtered out. You should be able to just grab that returned array and set your selected option state I'm demoing in this simplified code:
import { useState } from "react";
import Select from "react-select";
export const options = [
{ label: "Option 1", value: 1 },
{ label: "Option 2", value: 2 },
{ label: "Option 3", value: 3 },
{ label: "Option 4", value: 4 },
{ label: "Option 5", value: 5 }
];
const App = () => {
const [value, setValue] = useState([]);
const handleChange = (e) => setValue(e);
return (
<Select
value={value}
options={options}
isMulti
onChange={handleChange}
closeMenuOnSelect={false}
/>
);
};
export default App;
You can have a look in this sandbox as well to see it working