Replies: 1 comment
-
I'm not sure what your goal is exactly, but this seems like something that would be better handled by the Here's an example: const [selectedColors, setSelectedColors] = useState<readonly ColorOption[]>(
[]
);
const runDbAction = (removedValues: ColorOption[]) => {
// Do whatever you need to do in the DB on your removed items
};
const handleSelectedChange = (newValue: readonly ColorOption[]) => {
// If the length of the new selected array is shorter than the currently selected,
// that means one or more items was removed
if (newValue.length < selectedColors.length) {
// Figure out the items that are no longer included and that's your removed array
// I could use a `.find()` to get only one item, but that won't cover the case
// where the clear all button is clicked
// If you use the prop `isClearable={false}`, you could switch to a find, as only one item
// could ever be removed at a time
const removedValues = selectedColors.filter(
(color) => !newValue.some((newColor) => color.value === newColor.value)
);
runDbAction(removedValues);
}
setSelectedColors(newValue);
};
return (
<Select
isMulti
options={colorOptions}
value={selectedColors}
onChange={handleSelectedChange}
/>
); This would actually cover more cases if you have the clear button enabled, as that wouldn't be handled in the case of attaching click handlers to the tags themselves. If this doesn't cover your use case, let me know and provide more details on why it doesn't work and I'll see if I can give you a better approach. Here's a CodeSandbox example: https://codesandbox.io/s/56n3wh?file=/app.tsx |
Beta Was this translation helpful? Give feedback.
-
There doesn't seem to be a direct way to handle the tag close action from the Select component that I could find. According to the documentation, the library uses the
TagCloseIcon
style for this purpose, which is defined in multi-value.tsx. As a workaround, I could utilize the TagRightIcon and attach anonClick
event to accomplish the desired action when the user clicks on each element in the select.Having an
onItemClick
event to handle such scenarios would be beneficial. In my specific case, I needed to perform an action on the database whenever an item was removed from the list. However, it's possible that there may be alternative methods available to handle this effectively that I'm not aware of.Beta Was this translation helpful? Give feedback.
All reactions