DataGrid: Change Detection is triggered several times just for hovering over DataGrid

[hemantg05]

Describe the bug Have a datagrid with some data. In the component in which datagrid is shown, console log ngAfterViewChecked() callback.

When you hover over datagrid, check dev tools console and see that change detection (ngAfterViewChecked) is fired too many times. This can cause performance issues and other unintended affects.

Expected: Change detection should not be fired just on hovering over datagrid.

cc @Carlfjord, @karinthulin

[tmcconechy]

cc @EdwardCoyle @bthharper @pwpatton

I see a worse problem here:

1. add a console log to src/app/datagrid/datagrid-fixedheader.demo.ts in ngAfterViewChecked
2. open http://localhost:4200/ids-enterprise-ng-demo/datagrid-fixedheader and watch the console
3. this actually hangs (does this in both NG 9 and NG 10)

Any suggestions by anyone?

[tmcconechy]

On further investigation:

a) the renderloop is causing the "infinite" change detection so removed the timeout https://github.com/infor-design/enterprise-ng/commit/343fd77f81ef670200aebbee03ca1d1e40f8974d#diff-3d14b8398698f2267074f7b567b35fe4408c96b272369ed629da36847705f621R30 b) need to change the datagrid hover state to use css and not add a class c) need to change the datagrid mousemove event so it doesnt need to do this (perhaps drop resizers in ever column at the start)?

But this is not as serious as i thought it might be

[bthharper]

@tmcconechy - meant to talk to you today on this however your findings above matched mine, the main issue I could see was when moving the mouse over the grid or the theme menu, and was going to ask about the datagrid manipulating the DOM. I did not notice the issue with the render loop, although that was my initial thought.

[pwpatton]

for some reason calling this code in datagrid.js causes change detection each time the mouseentered or mouseleave event is fired.

    if (self.settings.showHoverState) {
      self.element
        .off('mouseenter.datagrid, mouseleave.datagrid')
        .on('mouseenter.datagrid', 'tbody > tr', function () {
          const rowNodes = self.rowNodes($(this));
          rowNodes.addClass('is-hover-row');
        }).on('mouseleave.datagrid', 'tbody > tr', function () {
          const rowNodes = self.rowNodes($(this));
          rowNodes.removeClass('is-hover-row');
        });
    }

I have tried stopPropagation and returning false but neither work.

[tmcconechy]

what do we think about defaulting the hover state to off?

[pwpatton]

Hard to force that off, we could definitely add the option to soho-datagrid.component.ts.

What I'd like to know is what exactly about that event listener causes the change detection. Is it really bubbling up or is there some other weird issue. I spend a while trying to see if I could stop it from bubbling but was unable to get anything I tried to work.

I also wonder if jQuery is doing something under the covers, I'd like to see if we have a problem using addEventListener instead of using jQuery.

[tmcconechy]

unable to fix this...