Is it possible to prevent default onDeselect, (select input multiple ant design)? - reactjs

Question

What I´m trying to do is to control the onDeselect event, I want to ask a question before the event finish. And then if the user accept delete the option could be deleted.
This is my select and the props:
<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="Select at least one"
allowClear={false}
onSelect={this.addNewClassroom}
onDeselect={this.deleteClasroom}
>
{classroomSelect}
</Select>
This is the function that I use:
deleteClasroom(val, e){
//e.preventDefault();
confirm({
title: 'Are you sure?',
content: 'Delete this...',
onOk() {
// -----------> delete the item
},
onCancel() {
// -----------> keep the item
},
});
}

Answer 1

onDeselect happens after the event and does not expose such a functionality. However you can convert the component into a controlled component and implement your use case.
class App extends Component {
constructor() {
super();
this.state = {
values: ['a10', 'c12'],
};
}
onDeselect = (value) => {
const that = this;
confirm({
title: 'Are you sure delete this task?',
content: 'Some descriptions',
okText: 'Yes',
okType: 'danger',
cancelText: 'No',
onOk() {
that.setState(prevState => ({
values: prevState.values.filter(item => item !== value),
}));
},
onCancel() {
;
},
});
}
onSelect = (value) => {
console.log(value)
this.setState(prevState => ({
values: [...prevState.values, value],
}));
}
render() {
return (
<div>
<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="Please select"
value={this.state.values}
onSelect={this.onSelect}
onDeselect={this.onDeselect}
>
{children}
</Select>,
</div>
);
}
}
See working example here.