Is there anyway to trigger "onchange" event on Bonita widget when data is loaded?

Q&A
1

I am making a custom textarea widget to add some javascript script to check the value of textarea and adjust the height to prevent scrolling inside the textarea. My script is as below:

// Check value at page load
async function checkCustomTextAreaAuto(milisec) {
    await waitforme(milisec);
    $('.customTextAreaAuto').val(function(){
        var currentVal = $(this).val();
        if ($(this).outerHeight() > this.scrollHeight) {
            $(this).height(1)
        }
        while ($(this).outerHeight() < this.scrollHeight) {
            $(this).height($(this).height() + 1)
        }
        return currentVal;
    });
}
// function for delay
function waitforme(milisec) {
    return new Promise(resolve => {
        setTimeout(() => { resolve('') }, milisec);
    })
}
$(function () {
    //wait for 1 sec to make sure value is finished loading into widget
    checkCustomTextAreaAuto(1000);

    // TODO - might need to add event to the below
    $('.customTextAreaAuto').on('input change', function () {
        if ($(this).outerHeight() > this.scrollHeight) {
            $(this).height(1)
        }
        while ($(this).outerHeight() < this.scrollHeight) {
            $(this).height($(this).height() + 1)
        }
    });
});

The above script work fine for page load or when user input directly to the widget.

However, if the widget's value is changed by changing the object value that loaded into the widget, the code is not trigger.

Is Bonita support any event listener for this case so that I can add event to the "TODO" part?