fixed issues with dynamic item collections in bootstrap-select

[Mobe91]

This PR fixes issues that I faced with dynamic collections and that are probably related to #34 .

Attached you find the example project that I used to work on this issue: aurelia-select-value-observer-test.zip.
With my changes applied, the initially selected country in the dropdown is correctly set to 'Italy'.

[ghiscoding]

Hello and thanks for the PR, I thought I would have time to review it today but I was busy releasing a new version of my other repo (Aurelia-Slickgrid). I hope to take a look at that in the coming days. Thanks again

[ghiscoding]

So I started testing this and here's a few observations

1. the issue in Content of dropdown list not updated when bound collection is replaced #34 is partially fixed, the collection does get changed but
   • a. other properties like subtext, alternateText and others are still not working. Only regular array of string works correctly
   • b. also, if I try to preset with a new option from the collection, then it doesn't show up. However you said it works on your side, not sure why.
2. the multiple selection is not working anymore, even though I have it set with multiple="true", I can only do a single selection at a time.
   • however preset of multiple options does work, something like this in my VM: this.picnicValue = [1, 3]; but after if I go in the UI and I want to start multiple, it only keeps last selection

The 1. is not so much of a concern since I still think the issue #34 is related to a problem with the 3rd lib itself.
However the 2. is very important and I canot merge your PR until that is fixed.

Not sure why the multiple selection are not working anymore, I hope you have an idea. (found it)

EDIT
I found the problem, you changed this line in the View:

- value.bind="value"
+ value.bind="selectedValue"

and since then the multiple selection is broken because of that simple change. It's a bit strange, because I don't actually use it (which is maybe the cause of some of #34 issues). If I change it back to the previous value, it works but then the collection change doesn't work anymore...

EDIT 2
If I completely remove the value.bind (again since my code doesn't really use it), then the multiple selections works again and if I put back the setTimeout that I had before, the collection change works again AND it fixes what didn't work for me in my observation at 1. b)

View

- value.bind="SelectedValue"

ViewModel

  collectionChangedObserver(newCollection, oldCollection) {
+    setTimeout(() => {
      this.domElm.selectpicker('refresh');
+    });
  }

With this edit, it might not be great to see the setTimeout but it's much more stable, so I think we should probably stick with that.
At the end of it, 1.a) still doesn't work (subtext and others) but it's much better than before.

Unless you have other comments, would you mind updating your code with the last changes I just wrote? Also my lint complains about 2 small things, var observer (var should be let) and finally in the renderSelection() function, the content of the second if has too much indentation (2 spaces too much).

[ghiscoding]

Since I had no news from your side, I made the changes that I mentioned to fix multiple selection and collection delay issue. I will release a patch version 1.1.2

Thanks a lot for the contributions

[Mobe91]

@ghiscoding Thanks for merging the changes and sorry for not answering. I am quite busy at the moment, maybe I will look at how to fix the remaining issues when I have more time and create another PR!