meteormeteor-blazemeteor-collection2meteor-collections

Why is the reactivity of a local collection messing up my UI?


I have this in the parent template:

{{#each oddsReactive in bet.oddsChecked}}
  {{>InputOdds arrayKey='oddsChecked' arrayIndex=@index}}
{{/each}}

The helper "bet" provides this data:

bet: () => ChecksCollection.findOne()

where:

ChecksCollection = new Mongo.Collection(null);
ChecksCollection.insert({
  oddsChecked: ['', ''],
  oddsAverages: ['', ''],
  oddsCompeting: ['', '']
});

I need "bet" to stay reactive because it's possible to add elements to the arrays from the parent template.

When I edit the text box from the child template (InputOdds), the focus is lost after each 'keyup'. Also at the first edit, it copies what I managed to write from the textbox of the first child template to the one of the second. Why? Why is the reactivity of the local collection messing up my UI?

Template.InputOdds.events({
  'keyup input.form-control': function (event, template) {
    template.currentOdds.set(event.target.value);

    var objectForSet = {};
    objectForSet[template.data.arrayKey + '.' + template.data.arrayIndex] = event.target.value;
    ChecksCollection.update({}, {$set: objectForSet})

As you can probably guess, if I comment out the last line, the UI is not messed up anymore. Please help me with this without recommending _.debounce or Meteor.setTimeout for the last lines, because they just postpone the messing up of the UI... I wish to have instant reactivity.

Probably unnecessary, but this is the html of the child template:

<template name="InputOdds">
  <div class="form-group">
    <label for="{{arrayKey}}{{arrayIndex}}">{{label}}</label>
    <div class="input-group">
      <input type="text" class="form-control" id="{{arrayKey}}{{arrayIndex}}" value="{{odds}}"
             placeholder="{{placeholder}}">
                    <span class="input-group-addon">
                      {{#if equals isValidOddsFormat 'yes'}}
                        <span style="color:green" class="glyphicon glyphicon-ok"></span>
                      {{/if}}
                      {{#if equals isValidOddsFormat 'no'}}
                        <span style="color:red" class="glyphicon glyphicon-remove"></span>
                      {{/if}}
                    </span>
    </div>
  </div>
</template>

Solution

  • This is a bug in Meteor's Blaze: https://github.com/meteor/meteor/issues/6111

    If anyone can think of a workaround, please clone that git, try to find it and let me know!