0

Overall what I am doing is I have a datepicker where clicks bubble up to the body, and I also have ag-grid which has a column menu that listens for clicks on the body and closes the menu. See plunkr, just have to click the hamburger next to DOB and go to filters, then click the datepicker and pick a date. notice the menu doesn't close. It stays open because of the event listener added in the app.component which stops the event from propagating to the grid once it hits the body. Everything works as I understand it should.

https://plnkr.co/edit/QDUVOUEHJYMNSumVFICc?p=preview

 document.body.addEventListener('click', event => {
            if (~event.srcElement.outerHTML.indexOf('mat-calendar-body')) {
               event.preventDefault();
               event.stopPropagation();
               event.stopImmediatePropagation();
            }
        });

The issue I am having is that the exact same setup in my app doesn't work. The event handlers are called, and in the correct order, but for some reason in my app even after cancelling the event using the same handler, the grid still gets the event and closes the menu. What I am looking for here is some ideas for what could cause the behavior I am seeing. Obviously I would setup a plunkr to demonstrate, but I can't because it seems to work three and I can upload my entire app.

Josh
  • 1,648
  • 8
  • 27
  • 58
  • 1
    There are not many elements above `body` for an event to propagate. – Teemu Aug 23 '17 at 19:05
  • Did you look at my plunker? The stopPropagate is to prevent the event from propagating back down to other listeners that are listening on body click.(ie ag-grid). It is effective in the plunker. – Josh Aug 23 '17 at 19:08
  • Interesting. What back down propagation are you talking about? Capture phase comes before bubbling phase afaik. – yezzz Aug 23 '17 at 19:25
  • @yezzz I may not be describing it correctly, but think of the case I describe in the question. There is a datepicker that initiates the click event, which bubbles up to body, and then there is a grid that listens for click on body. So event goes from datepicker -> body -> grid. Maybe "down" isn't the right word, but ultimately that is the event flow. I should be able to stop it at the body and prevent it from being handled by the grid, which is what I am doing successfully in the plunker but cannot make work in my project. – Josh Aug 23 '17 at 19:27
  • Isn't @hostlintener better for this case? – Vega Aug 23 '17 at 19:50
  • @Vega I tried hostlistener, but simplified it to basic javascript to rule out any funny business since it wasn't working with hostlistener either. – Josh Aug 23 '17 at 19:51
  • Do you have an other 'hidden' listener in your app? – Vega Aug 23 '17 at 19:51
  • @Vega not sure what a hidden listener is, but its possible many of the node modules I amusing may be listening on body click as that is a popular handler to close/collapse things from. Regardless if the event is stopped at the body none of those handlers should be able to handle it after right? And all of those handlers would be added after the body handler as that is added in the app.component constructor/ – Josh Aug 23 '17 at 19:54
  • Yes I meant that. But I am not sure, that An other listener on body will not overwrite the first one. – Vega Aug 23 '17 at 19:55
  • @Vega Well both events fire, so the second event listener isn't overwriting the first one, if anything its like its on a separate event chain that doesn't care about the previous cancelled event. – Josh Aug 23 '17 at 19:56
  • I am not sure I get you, sorry. I wanted to say if there is an other body listener down the code it can overwrite the one at the main level. Did you mean that too? – Vega Aug 23 '17 at 19:58
  • @Vega yes thats what I meant as well. I was saying I don't think the grid's body listener is overwriting the main one I add in app.component, because when a click happens both of them fire, and they fire in the expected order as well. Its just that calling event.stopPropagation in the main handler which fires first is not preventing the grids handler from firing directly after. – Josh Aug 23 '17 at 20:01
  • Are you sure the listener is fired any way, and are you sure the condition (with if) is validating? and have you tested with window.body.addEve... – Vega Aug 23 '17 at 20:04
  • @Vega Yes I have set breakpoints in both handlers, and the if is validating (even with the if commented out cancelling all events it still doesn't work) and all handlers are being hit as expected, except when the grid's handler gets hit when it shouldnt. – Josh Aug 23 '17 at 20:30

1 Answers1

0

this issue have been fixed, please update to the latest version of zone.js and angular.

jiali passion
  • 1,691
  • 1
  • 14
  • 19