propagate change event.

[knasser]

Prerequisites

• I am running the latest version
• I checked the documentation and found no answer
• I checked to make sure that this issue has not already been filed

Demo Page

https://jsbin.com/degobup/edit?html,js,output

Explanation

using Tagify with Angular .. you would expect that the changes in the original input are propagated to the Angular model.
I think this is more of a general issue, I have it with angular.
the temp fix is to add line below at 1682:
this.DOM.originalInput.dispatchEvent(new Event('change'));

Perhaps you want to validate and see if the change goes with your design or there is a better fix.

• What is the expected behavior?
  using Tagify with Angular .. you would expect that the changes in the original input are propagated to the Angular model.

• What is happening instead?
  Angular model is not updated with the changes

• What error message are you getting?

[yairEO]

A friend helped me with the Angular port, she did it all as I have zero knowledge or interest in Angular.. To make any fixes I would require a reliable PR :)

[knasser]

see this one:
https://jsbin.com/jenizorilu/edit?html,js,output

if you disable tagify .. the change event is fired from the textarea once you change it..
after enabling tagify the change event is blocked..

will create the PR.. though not sure this is the best solution you would use.

[yairEO]

Your demo page has no Angular.
What do you mean "if you disable tagify". How did you disable it? in what manner do you consider it disabled?

and how do you "enable" it back? what is happening in between?

[knasser]

yes.. no angular .. tried simplest config to demonstrate it is a general consideration.
disable == comment out the call to tagify :) ==> you get the change event (i.e. the alert popsup)
enable == uncomment.. ==> with tagify the alert doesnt appear..

[yairEO]

But why do you need a change event on an textarea?
What is the logic here, the flow?

[knasser]

the onchange is used to bind the "original" input to the model (plain object)
once changed the model is serialised to json and saved to the database.

[yairEO]

Why do you need to bind the "original" input? you only need to populate it with data, but not the other way around, which is to use an "onChange" event listener for it, and work directly with Tagify's events. This sounds similar to this issue:

#364

[knasser]

Tagify events could work but I think it is a bit more invasive..
In general, when you have already an application developed and you want to add tagify features.. if tagify fires the update event on the original input, you dont need to change anything with your original application other than tagifying the inputs.... this is the approach used by other decorators like tagify.. e.g. Select2

In my case, it is quite destructive to do it via Tagify .. The application depends on Angular and schema form (http://schemaform.io/) to bind the form inputs to the model objects automatically upon any changes to the complete form .. if the events are not propagating we will have to rewrite the binding between tagify and the all the forms again..

for us that line in the PR is doing the trick and tagify is working like a charm with angular and schemaform .. :) thought about sharing

[yairEO]

ok sounds good to me, I will look into this

[yairEO]

fixed

[knasser]

yep.. got the latest version.. works nicely. 👍