custom HTMLElement inside header loses event handler

[ardakod]

Describe the bug

When I use a custom HTMLElement inside the name property of a column definition like this

  const div = document.createElement('div');
  const button = document.createElement('button');
  button.textContent = 'click';
  div.appendChild(button);
  button.addEventListener('click', () => alert('hi'));

    this.columnDefinitions = [
      { id: 'title', name: div, field: 'title' },

In angular slickgrid the click event handler does not trigger whereas if I do the same in a normal slickgrid (6pac repo) grid the click event is fired.

Reproduction

https://stackblitz.com/edit/stackblitz-starters-akwtsl?file=src%2Fslickgrid-angular%2Fslickgrid-angular.component.html

Expectation

the click event should have displayed the alert

Environment Info

angular-slickgrid: 8.3.1

Validations

• [X] Follow our Code of Conduct
• [X] Read the HOWTO - Quick Start.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• stackblitz-starters-akwtsl (Open reproduction)

[ghiscoding]

most probably because when you tried 6pac/SlickGrid, you had a very basic grid without other plugins installed. However that's not the case of Angular-Slickgrid because it's an all assembled lib (I always compare core SlickGrid as an IKEA product, core SlickGrid is not assembled but Angular-Slickgrid is all assembled). So with all that said, I wouldn't be surprised that one of the plugin (probably Header Menu) is catching and stops event bubbling, you can maybe try enableHeaderMenu: false to disable that menu and see if it's the cause (and/or disable other plugins)

[zewa666]

perhaps take a look at the dom element and which event listeners are exactly attached. https://umaar.com/dev-tips/24-view-event-listeners/

as a sidenote, using the capture option on the eventlistener might be a way to workaround the issue as you listen on the capturing vs bubbling phase

[ardakod]

for only slick grid we can see the event listener to the button but with angular wrapper that button listener is not displayed. Neither capture true nor enableHeaderMenu false fix it

[ghiscoding]

I'm not really sure that I should really spend time on something like this when in fact the Header Button plugin was really made for this usage, so why not use Header Button?

[ardakod]

as you wish FYI it was bothering me when I tried to add a custom angular header component to the header which I think is a great feature

[ghiscoding]

this is an open source project, I certainly welcome bug fixes and features. So any help would be welcome,

[ghiscoding]

closing since this is an upstream bug in Slickgrid-Universal rather than Angular-Slickgrid, I'm closing this issue and opening this new Slickgrid-Universal issue related to this bug (which I did find the route cause but I'm not sure how to fix it yet, more info in the new universal issue)

[ghiscoding]

@ardakod the issue was resolved and the fix was shipped in v8.4.0, you can also see a demo of button with click listener in Example 14. You can also upvote ⭐ if you like the lib, cheers