Clicking on a table row triggers onDraw event

[sohisanati]

Describe the bug
I am using a table with search input. When user enters something in the search input and clicks on a row, the selected row gets highlighted for a second and the it goes back to being not highlighted. On the consecutive clicks on tables rows, selected rows stay highlighted. The issue is only happening on the first click after search results are updated.

The onDraw function is being called after the first click and I think that's the issue since that re-draws the page and hence we lose the highlight on the selected row. So when the issue happens, the onlick function on the row is called and then the onDraw method runs.
On the consecutive row selections, only the onClick function which is defined on each row gets called and that's why the selected row stays highlighted.

So steps to reproduce

1. User enters 'test' in the search input box and waits for the list to get loaded.
2. User clicks on a row in the list
   The selected row gets highlighted for a second and goes back to being the

`

`

var tableFuncs = {
onDraw: function () {

  var table = document.getElementById("itemlines");
  var rows = table.getElementsByTagName("tr");

  for (var i = 1; i < rows.length; i++) {
 
    var currentRow = rows[i];

    // highlight single click
    currentRow.onclick = function(e) {

      // Highlight row
      Array.from(this.parentElement.children).forEach(function(el){ el.classList.remove('selected-row'); });
      this.classList.add('selected-row'); // Store value        }
  }
}

};

Expected behavior
Expected behavior is that the selected row stays selected and the onDraw function is not called when a row is selected, since there is no change on the table