`tbwchange` acts like `input` events, not `change`

[timint]

I discovered something unusal. The tbwchange event acts like the input event and fires upon every input event rather than change. Is that by design? Thinking it should have been named tbwinput. Change is passed on blur after there has been input.

Would it be a better solution to delegate the normal change and input events back to the input field? .trigger('input')

I was attempting to do the following when I discovered there are no events firing at all for the input field:

$(':input[name="wysiwyg"]').on('change', function(){
  ...
});

[Alex-D]

The initial element can be a div or anything, so I can't move to just 'input' but yes, maybe its name is wrong now ^^

[dyorgio]

Hello, I did a workaround:

let timeOutId;
let lastValue;
// delay change notification during user editing
var delay = 300;
var editor = $(':input[name="wysiwyg"]');

editor.on('tbwchange',function(){
 clearTimeout(timeOutId);
 timeOutId = setTimeout(() => {
  var curValue = editor.trumbowyg('html');
  // check if it was modified
  if (!lastValue || lastValue.length != curValue.length || lastValue !== curValue) {
    lastValue = curValue;
    // YOUR CODE HERE
  }
 }, delay);
});

Version without LAZY:

let lastValue;
var editor = $(':input[name="wysiwyg"]');

editor.on('tbwchange',function(){
  var curValue = editor.trumbowyg('html');
  // check if it was modified
  if (!lastValue || lastValue.length != curValue.length || lastValue !== curValue) {
    lastValue = curValue;
    // YOUR CODE HERE
  }
});

[Alex-D]

What is the goal of this workaround? Is that to squash multiple tbwchange triggers in a single call?

[dyorgio]

Hi @Alex-D, yes.

The first version is the real workaround, because also include delayed support (don’t call code multiple during user fast input).

Both only call code if there is a real change on contents.

[dyorgio]

@Alex-D I would like to include an explanation about motivation.

When you use Frontend components that binds with backend with statefull session you probably don’t want so much calls to server.

the code above tries to reduce it.

[Manaspaul623]

It looks like the tbwchange event is working as a click event. Every time we click on the text area, it got triggered. The tbwchange event triggers after every word we type.