Aurelia-Bootstrap-Tagsinput, options not working as expected

[heshanjy]

ViewModel <abp-tags-input value.bind="resourcesList" options.bind="pickerOptions"></abp-tags-input>

Example.ts

export class Example {
  resourcesList= [{ value: 1, text: "Amsterdam", continent: "Europe" }, { value: 2, text: "Amsterdam1", continent: "Europe" }, { value: 3, text: "Amsterdam2", continent: "Europe" }];

  pickerOptions = {
    itemText: 'text'
  }
}

it works fine for string array but not for object list as it has mentioned in the documentation , what it shows is [object][object] in input box after the binding,

[ghiscoding]

I would be happy if you could make a PR to add this functionality. Else it might take couple weeks, in my spare time, to add this feature. Thanks

[ghiscoding]

So I spent couple of hours on this issue and it seems that the problem is not coming from my plugin but rather from the bootstrap-tagsinput library itself. I found this Stack Overflow question which summarize the same issue and a couple of comments saying that this doesn't work anymore. Also, looking more into the list of issues under that project, it seems to be unsupported anymore as the last version on NPM is 0.7.1 (Nov. 2015) and on Github itself the last published version is 0.8.0 (Feb 2016), in both cases these versions are quite old and there is 275 open issues.

So I'm rather considering moving away to another more supported library. While investing for this, I came across 2 links of other libraries which look promising. jQuery tagEditor and Tokenfield for Bootstrap. However, the drawback that I see right away is the lack of Bootstrap styling to change the tags color, but they both can be customized by CSS, so I guess it's just a matter of adding CSS classes to handle that.

Not sure what else to do, but I'm seriously considering in eventually creating another plugin with another tags library.

Lastly if you want to see a quick gif of the troubleshooting that I did, we can see that the issue occurs after the tagsinput({}) is called with the correct options you provided. It transforms into an empty input.

[ghiscoding]

Another alternative, probably a better one, though it's a suite of controls. FuelUX which I used in the past for their nice wizard. It's worth considering.

Coming back to your original issue, I don't think there is much I can do with it. I suggest you to use String only. I might be create other plugin(s) but that is probably going to take a while since I got other things on my plate.

[ghiscoding]

closing since this is an external bug in the Bootstrap-Tagsinput library itself and because it is not maintained anymore, I can't really do anything more. I will eventually create another alternative plugin, but in the mean time just use string or array of strings