The editableRegionChangedEvent trigger many times for some reason.I have tried with it many weeks to get why the event trigger many times.
Finally, I have found a workaround and work properly with me. The idea is store the old values in static html attribute, when the onchange event triggered compare the old value with newest one if equal that means there is duplicate on change else the value is new.So the code inside the onchange will running the first time and blocked the function until any change on the field value.
function onCustomTextChanged(sender, args) {
// console.log(args)
var editInputDiv = ""
try {
editInputDiv = args.editableRegion.id
} catch (ex) {
editInputDiv = args.oldEditableRegion.id
}
// console.log(editInputDiv)
var orignalID = editInputDiv.substring(0,editInputDiv.indexOf("_pickereditableRegion"))
var orginalControl = $("#" + orignalID);
if (orginalControl.attr('data-temp') == undefined) {
orginalControl.attr('data-temp', "")
}
var editorValue = []
$('#' + editInputDiv).find(".valid-text,.invalid-text").each(function () {
editorValue.push($(this).text().replace(/\u200B/g, ''))
})
var CurrentEditorValues = editorValue.toString().replace(/\u200B/g, '')
if (CurrentEditorValues == "" && orginalControl.attr('data-temp') != "") {
orginalControl.attr('data-temp', "");//Clear the data-temp in case the input filed is empty
}
else if (orginalControl.attr('data-temp') != CurrentEditorValues ) {
orginalControl.attr('data-temp', CurrentEditorValues );//Update the value
}
}
BR