Tagify: Tagify sets value as array of hashes, not comma separated string

[biznickman]

Prerequisites

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

JSBIN bug template

If possible, clone & modify the below template to reproduce your issue

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

Explanation

• What is the expected behavior?
  I expect that value of the input to become a string of comma separated tags.

• What is happening instead?
  It returns an array of hashes formatted as [{"value":"xxx"},{"value":"yyy"},{"value":"zzz"}].

• What error message are you getting?
  None

The default behavior of Tagify is somewhat odd. Let's say the starting value of the field is "xxx,yyy,zzz". You would expect that adding the tag aaa would update the value to be xxx,yyy,zzz,aaa. However instead it becomes [{"value":"xxx"},{"value":"yyy"},{"value":"zzz"},{"value":"zzz"}]. This is pretty inconvenient and breaks the parsing on the server side when submitted. I could change my logic on the server but that would then make the code brittle as the input is exclusively dependent on tagify versus the expected comma separated array.

[yairEO]

It might seem "odd" but it has gone though discussions, but to sum it:
Some scenarios dictates a more complex output than the given input.

There is an example on the demo page:
https://yaireo.github.io/tagify/#section-mix

Where the initial value is used to search the _whitelist_ of matching items (by _value_), so actually the original input's value like so: foo, bar with a whitelist being used & enforced, will be transformed into this: [{value:"foo"},{value:"bar"}]

Now imagine a user wanting to input tags, where the value of a tag might contain commas. For example, locations, such value might be: _"NY, New York"_

Then, I would have to escape the commas when updating the original input's value, which might confuse a server not ready for _escaped_ content.

Further more, there are some situations where additional information per tag should be submitted, and not just its value. for example, a user can toggle a tag (on/off) or set a color to it, or whatever the developer has in mind for tags manipulation, and in that case, that data should be submitted to the server, and an Array of Object is the best way to do that, where each Object is a tag and the properties of the object are properties that represent that _tag_.

---

If you wish to change it the value before sending it to the server, assuming you are aren't submitting the form as-is (in the traditional HTML way) but via javascript, then you can simply traverse the value of the input just before sending it and map it:

[{value:"foo"},{value:"bar"}]
  .map(({value}) => value)   // ["foo", "bar"]
  .toString()                // "foo, bar"

[nazgum]

This feels like such a bizarre choice.

Most tags are stored in an array or a comma separated string in the database, its really weird you would not provide a method to output that way.

(and seemingly for a really niche feature; I think most apps wont care about commas as part of a tag, as most tag systems use commas for the deliminator, and thats then confusing)

[yairEO]

@nazgum - can you elaborate how does this affect you?

[yairEO]

related to #197

[nazgum]

Sure, when making an app I want forms to submit the same data whether they use javascript or not.

It feels really weird that a user with noscript or javascript disabled will submit a tags field as a comma separated list; then a user who has this plugin will submit it in a strange format.

Now the server has to handle two separate responses, or I have to write custom javascript to attach to forms for a plugin that is meant to handle this for me.

[yairEO]

See originalInputValueFormat setting in the output value section