Bubbling browserTrigger() event

[dimirc]

I'm trying to use browserTrigger() on an element and need the event on to bubble up to its ancestors, but the handler from the element (ancestor) isn't firing

This is a simple example of what I'm trying to do:

<div ng-click="catchMe()">
  <span>ClickMe</span>
</div>

var child = $document.find('span');
browserTrigger(child,'click');

The catchMe() event (div's click handler) isn't getting fired.

I checked the code from browserTrigger and the event that is pass to element.dispatchEvent(env) is with canBubble : true, so I don't get why it isn't bubbling...

[dimirc]

I did a simple working bubbling example

But if I run it as a test, the bubbling isn't happening:

it('should bubble event to parent element', function () {

  $scope.total = 0;
  var template = '<div class="out" ng-click="total = total + 1"><div class="in"></div></div>';
  var el = $compile(template)($scope);

  var divOut = el[0];
  browserTrigger(divOut,'click');
  expect($scope.total).toBe(1);

  var divIn = el[0].children[0];
  browserTrigger(divIn,'click');
  expect($scope.total).toBe(2);  // < ------ FAIL: $scope.total = 1

});

[dtabuenc]

Native bubbling does not work on detached DOM in some browsers. So element.dispatchEven(env) might not bubble in this case. Things like jquery.trigger() manually compute the parents and iterate over each one, triggering handlers in turn. You can either try to replicate the jquery behavior, or attach the dom somewhere (maybe just some hidden div at the end of the document).

[dimirc]

@dtabuenc I was suspecting that has something to do with the detached DOM but couldn't find any documentation that talks about this, did you find that somewhere?

I was also trying to replicate jQuery.trigger() functionality using jqLite.triggerHandler() and triggering its parents handlers (if event isn't stopped from previous handler). The problem found here, was that the library I'm testing is based on angular 1.0.8 and triggerHandler() method don't let you send any eventData, this functionality was introduced later and in some parts of the code under testing, the eventData is needed.

Anyway, when testing bubbling I guess attaching to document might be the workaround for now or maybe just replicating trigger() functionality but using dispatchEvent() to be able to send the needed eventData

[petebacondarwin]

Hi @dimirc - thanks for creating this issue and looking into the problem. browserTrigger is not really a public API for AngularJS and is only provided to support our internal testing. It seems that we would have to add quite a bit of logic to cope with triggering events on elements that are not attached to the DOM.

With all this in mind, as it is currently working as we need it to for our purposes, we are not going to be able to assign time to improving it.

I suggest that you either try the workaround of attaching the elements to the document, or perhaps loading up jQuery and using .trigger() or making your own copy of browserTrigger() and work to improve its logic to support such cases.