Materialize: Prevent Collapsible open/close events

[olivermaldonado]

I'm trying to handle click events from inside the collapsible items' headers, on elements inside the headers (buttons and dropdowns). The events are firing, the problem is that the open/close event from the collapsible framework is also triggering, before the other event. So I cannot stop that action with stopPropagation.

I'm guessing the framework registers handlers with all the children inside the collapsible headers? Has anybody had this problem before? I've been searching but haven't found anything yet.

I'm using meteor, so the collapsible is initialised from inside the onRendered function, and the events are registered using the normal events function provided by meteor. I can't invert the event triggering order.

[blahah]

The problem seems to be that the normal jQuery events all finish bubbling before Meteor handlers get executed, and the collapsible handler is a jQuery one (see here).

A workaround is to intercept the event using normal jQuery event handlers, then emit a new event that you can work with in Meteor...

Template.collapsibleItem.rendered = function() {
  $('.collapsible').collapsible();

  // hackety-hack - don't collapse the task if user clicks
  // on the buttons. Instead, emit a new custom event that we can
  // handle with a Meteor handler
  $(this.firstNode).find('.dont-collapse').on('click.collapse', function(e) {
    e.stopPropagation();
    $(e.target).trigger('escaped-click');
  });
}

Template.collapsibleItem.events({
  "escaped-click .dont-collapse": function(event) {
    // do whatever with your event
  }
});

[olivermaldonado]

Thanks for the suggestion. I figured something like that was happening. And your workaround would definitely work, probably the only way to make it work for now. But 'hackety-hack' is the right expression. I prefer not to force frameworks to play along.

Unfortunately this was not the only issue I encountered trying to make Meteor and Materialize work together. It's difficult to find a good match between frameworks, especially one that features reactive data updates.

I'm looking forward to try again in the future, but for the time being I'm switching to something that works better with Meteor. Too bad, because I love the simplicity and style of the framework.

[djensen47]

I would be really nice if something like the .dont-collapse class as suggested by @blahah were included in the framework.

[devunz]

Hi,
i've added this pure jQuery code in my core:
$(".not-collapse").on("click", function(e) { e.stopPropagation(); });
If you want add this code in core system.

[vito8916]

@devunz It's an amazing solution. Thanks for share

[Hotkey]

@devunz thank you, simplicity is the best everytime, everywhere ;)

[devunz]

you're right, it's just my basic thought :D