Semantic UI Multiple Select Dropdown Not Reactive in Meteor?


I have a template that has a multiple selection dropdown with reactive data.

<div id="units_{{_id}}" class="ui multiple selection dropdown">
  <input type="hidden" name="units_{{_id}}" value="{{units}}">
  <i class="dropdown icon"></i>
  <div class="default text">Assign Units</div>
  <div class="menu">
   {{#each availableUnits}}
      <div class="item" data-value="{{profile.callsign}}">{{profile.callsign}}</div>
   {{#each busyUnits}}
      <div class="item" data-value="{{profile.callsign}}">{{profile.callsign}}</div>
   {{#each unavailableUnits}}
      <div class="item" data-value="{{profile.callsign}}" type="hidden">{{profile.callsign}}</div>

However, whenever I update the value="{{units}}" attribute, the new tags do not show up. For example, the original value for {{units}} was 501,121 but when I added new values to 501,121,506, the tags don’t get added.

Essentially, I want this:

[![enter image description here][1]][1]

to become this

[![enter image description here][2]][2]

whenever I change the data of the value attribute.


Semantic-ui can be tricky in this regard with some of their widgets.

Are the actual menu values rendered in the DOM when you make the value change? I always found a lot of my quirks with using Semantic-UI widgets were related to timing and/or things not being rendered when I thought they were. Sometimes these issues are resolved best by using the dropdown in a sub-template of your main component.

If you hardcode the menu items in the dropdown <div class="menu">, do the items get selected when you change the value attribute?


I agree with @btbjosh that using subtemplates often fixes these kinds of problems with Semantic UI.

Here’s a sample system I built for my students to illustrate form controls in subtemplates:

Here’s the directory containing the subtemplates:



Sorry, I do not think I explained my problem well.

The menu items are completely fine and reactive; however, the problem lies with the value="{{units}} part. I have that multiple select dropdown appear two places in that page with the same value attribute. Whenever I edit one, the other’s value does not seem to update until I refresh the page. I’ve looked at the value attribute and the database, and they both update correctly.

In addition, I have experimented with making a sub-template like you suggested, but to no avail.