jQuery destroying `detail` of custom Polymer events in Meteor

Question

I am defining a Polymer component in Meteor that does a custom fire:

<polymer-element name="tm-card">
  <template>
    ... content ...
    <paper-button data-rating="good" on-tap="{{rated}}" flex raised> Good! </paper-button>
    <paper-button data-rating="easy" on-tap="{{rated}}" flex> Easy! </paper-button>
  </template>

  <script>
  Polymer({
    rated: function (event, detail, sender) {
      var rating = sender.dataset.rating;
      this.fire('rated', {rating: rating});
    }
  });
  </script>
</polymer-element>

This seems to work great and I can catch the event in Meteor:

<template name='reviewItem'>
  <tm-card>
    <p class="question">{{question}}</p>
    <p class="answer">{{answer}}</p>
  </tm-card>
</template>


Template.reviewItem.events
  'rated': (evt, tmpl) ->
    console.log 'item rated'
    console.log evt.detail # undefined
    console.log evt.originalEvent.detail # {rating: "easy"}

But as you can see the event detail is lost (in the "outer" event). The outer event is a jQuery.event and the originalEvent is the CustomEvent that is fired by Polymer.

The jQuery docs state that:

"The following properties are also copied to the event object, though some of their values may be undefined depending on the event:

... detail, ..."

But the docs don't say how custom event types are handled.

• Is this normal jQuery behaviour?
• Is Meteor wrapping the events in jQuery.event for my convenience?

Answer 1

I found a similar question: Javascript CustomEvent detail not getting passed

Then I found the following commit: https://github.com/jquery/jquery/commit/a90ff8c8c79bfcc32afd340a12f016f20a31d8b6

This fix is in jQuery's compat branch and should be fixed as of jQuery 3.0, so I'll answer my own question for now.