question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Row Hover Event causing template bindings to be constantly recalculated

See original GitHub issue

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior

As you hover over the rows of a rendered table - it seems a form of change detection is kicking in, causing all template functions to be called multiple times a second. This is causing a performance problem by causing a lot more work than necessary to occur on the front end of our app.

Expected behavior

I’d expect that hovering over the table rows would not trigger all template bindings to be updated, as no data would have changed.

Reproduction of the problem

Let’s say you have a simple ngx column:

    <ngx-datatable-column name="Company" width="300">
      <ng-template let-value="value" ngx-datatable-cell-template>
       {{ uppercase(value) }}
      </ng-template>
    </ngx-datatable-column>

With the corresponding component method for uppercase being:

  uppercase(word) {
    console.log("processing the uppercase...")
    return word.toUpperCase()
  }

On the rendered table, as you hover over the rows, you’ll see that the console log message is appearing multiple times per second - demonstrating multiple calls.

What is the motivation / use case for changing the behavior? The triggering of the function bindings, even if fast individually, being ran constantly without need is causing a performance issue, and the page to even feel janky.

Please tell us about your environment: Mac OSX, latest Chrome

  • Table version: 10.2.3

Still an issue with the latest version (10.2.3). It appears the issue was brought in with 10.1.0 - with the Row Hover Event feature. I’ve tested with 10.0.5 to confirm that the issue is not present there. I feel that this represents a performance regression, and for those who have desire to track hover events - it shouldn’t be causing a ‘digest loop’ style recalculation when simply moving the mouse over table rows.

  • Angular version: 4.2.4 (and tested with 4.3.6)

  • Browser: Latest Chrome, Safari etc

  • Language: all

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:7
  • Comments:12 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
mrjamesrileycommented, Sep 26, 2017

Thanks for the response @wizarrc. In our case, we have no need for the activate of a row, especially on hover event. It really feels excessive to recalculate all bindings every time the mouse moves over a table - with it triggering many times a second. It causes the experience to quickly get janky. Is there not a way to disable this ‘listener’ - to opt out of the activate event so that it does not cause all bindings to be recalculated as frequently as it is doing to?

2reactions
atakchidicommented, Sep 7, 2018

I did a pr that will fix this issue for those who like me don’t need mouseenter events in their app

Read more comments on GitHub >

github_iconTop Results From Across the Web

tr:hover not working - Stack Overflow
I'm trying to highlight (change background color) of the entire row when the mouse is hovering on a ...
Read more >
Changelog - ngx-datatable - GitBook
Breaking: Fixes several issues related to the summary row feature #1418 · Fix: DataTableColumnDirective Input Binding Changes #1384 · Fix: angular version #1420....
Read more >
Preventing Content Reflow From Lazy-Loaded Images
Reflow is a problem because it's a user-blocking operation. It slows down the browser by forcing it to recalculate the layout of any...
Read more >
Show Text When Mouseover Column Header Of Ngx ...
Easy to understand germ Peru Row Hover Event causing template bindings to be constantly recalculated Issue #989 swimlane/ngxdatatable .
Read more >
Release Notes | GXT 4.x - Sencha Documentation
GXT 4.0.3 introduced a method in the HBLayoutContainer that causes problems with the UiBinder compile. Here's the workaround for it.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found