I am using React Select to show list of items . On change of item , i want to show a warning based on some flag . If flag is true , Dialog box will be displayed and and confirm of that , I want to allow the change . For every on on change , i am storing the selected item in local state use effect . On click of confirm from dialog box or if flag is false , i am dispatching actions to store them in redux store .
I am having issue when Dialog box is appearing and on click of confirm, item in dropdown is changing , but onChange is getting called again with first value ,Hence dropdown is going back to initial value .
Why is onChange getting called twice .
Tried event.preventDefault , but not working.
const [name, setName] = React.useState();
const changeValue = (event,selectedItem) => {
event.preventDefault()
setName(selectedItem) // storing in UseState hook
if(flag){
props.toggleWarningDialog(true);
}
else {
props.onChangeItem(selectedItem);
}
}
const handleConfirmChange = (event) => {
event.preventDefault()
props.onChangeItem(name); //getting from useState hook and storing in redux by dispatching an action
}