Using react-select we have some options that have a callback and when clicked open a separate modal. We've created a custom MultiValueLabel which has a callback to the onedit
MultiValueLabel: props => { const { classes } = props.selectProps as unknown as CustomSelectProps; const item = props.data as InternalCustomSelectItem; return (<div {...props.innerProps} onClick={item.onEdit} title={item.title ?? item.name}> {item.icon && <div className={classes.valueIcon}>{item.icon}</div>} {item.name}</div> );},The callback looks something like this:
onEdit: async (groupKey: string) => { const groupForEdit = (await groupForEdit(groupKey)).value; return dispatch(ModalActions.showModal(CommonModalTypes.filterModal, { editingGroup: groupForEdit })); },I would like to stop the other options from appearing when clicking these objects because showing the modal AND the dropdowns is a lot going on when really the modal is the only thing actionable.
I've tried a few variations of e.stopPropagation(); or e.preventDefault(); but none of them seem to stop the options from appearing. Anyone done something similar?