Al usar reaccionar-seleccionar, tenemos algunas opciones que tienen una devolución de llamada y, cuando se hace clic, abren un modal separado. Hemos creado un MultiValueLabel personalizado que tiene una devolución de llamada al 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> ); },La devolución de llamada se parece a esto:
onEdit: async (groupKey: string) => { const groupForEdit = (await groupForEdit(groupKey)).value; return dispatch(ModalActions.showModal(CommonModalTypes.filterModal, { editingGroup: groupForEdit })); },Me gustaría evitar que aparezcan las otras opciones al hacer clic en estos objetos porque mostrar el modal Y los menús desplegables está sucediendo mucho cuando en realidad el modal es lo único accionable.
He probado algunas variaciones de e.stopPropagation(); o e.preventDefault(); pero ninguno de ellos parece impedir que aparezcan las opciones. Alguien hizo algo similar?