Select dropdown not reactive

help
1

Hi,

I have a peculiar case where in a default is reactive based on a previous value however when I use , it is no longer reactive. How do I debug this?

Here is my scenario that works:
TEMPLATE

<select >
 {{#each availablePG}}
 <option>{{name}}</option>
{{/each}}
 </select>

HELPER:

availablePG: function(){
        console.log("This is in availablePG. productName is " + Session.get("productName"));

        return  Dropdowns.find({name:"pg_options", product: Session.get("productName")}).map(function(c) {return {name: c.label, desc: c.desc};});


    },

IT FAILS WHEN:

<select class="selectpicker">
 {{#each availablePG}}
 <option>{{name}}</option>
{{/each}}
 </select>

When I change to the drop down is no longer reactive.

I’m using jesperwe:bootstrap-select package of bootstrap-select

Pretty sure that if I somehow re-render the template after setting the session variable used, the drop down will work. It’s not a subscription issue since I tested it with autopublish as well.

How do I go about fixing this?

Thanks

2

Did you check the original <select> after your helper runs?

What bootstrap-select does is hide the original <select> and create its own element using the options given in the original <select>.

You need to $('.selectpicker').selectpicker(); (which read the select>options into the selectpicker) after you change the elements in the <select> (after the helper runs).

3

the original<select> was reactive. The moment I used selectpicker, the reactivity went away. Meaning that i had to call $('.selectpicker').selectpicker('refresh'); in order to get the data.

I didn’t spend too much time on this as I found select2 to work perfectly out of the box. I proceeded with that. Selectpicker did have some really neat options though.