After referencing the Chips example, I attempted to render chips as the renderValue of the Select component. However, when I added onDelete to a chip to enable one-click deletion, I encountered an issue where the delete event was not being invoked due to the menu of the Select displaying.
https://material-ui.com/components/selects/
<Select
multiple
value={selectedProducts}
onChange={handleProductsSearchChange}
renderValue={selected => (
<div className={classes.chips}>
{selected.map(value => (
<Chip key={value} label={find(FAKE_PRODUCTS, {id: value}).name}
onDelete={() => handleDeleteSearchProduct(value)}
className={classes.chip} />
))}
</div>)}
MenuProps={{ PaperProps: {
style: {
maxHeight: 48 * 4.5 + 8,
width: 250,
}
}}}
>
{menuItems}
</Select>When moving the chip outside of the select, the delete event functions properly. How can I prevent the behavior of the menu opening on click while still allowing for chip deletions within the select? Any suggestions are greatly appreciated!
Thank you for your help!