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
}
stopPropagation prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
We can use event.isPropagationStopped() to determine if this method was ever called (on that event object).
Note that this will not prevent other handlers on the same element from running.
event.stopPropagation();