How to solve flickering table and bouncing scrollbar to top in DataTable Forge viewer?

Question

I have a DataTable which has 100 rows and I'm setting it with lists. Dynamically I change the lists with selected name from a drop down.

I do it with

   $("#datatable").remove();
   this.datatable =  new Autodesk.Viewing.UI.DataTable(this.panel);
   this.datatable.setData(datalist,titleList);

After the change if I try to go down with scrollbar, it doesn't allow and takes the scrollbar to the top automatically, the table flickers. If the number of rows are less, then there is no problem at all.

On Chrome console I see these messages:

Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. DockingPanel.js:553 [Violation]

at start

and when I try to scroll:

[Violation] Forced reflow while executing JavaScript took 75ms

Interesting thing is, if I zoom in/out on browser or go full screen, the problem disappears, I can scroll down without problem to bottom rows of DataTable. And I don't see those [Violation] messages. But the click functionalities of table don't work

I have deleted all css for container(DockingPanel) and datatable itself but the problem didn't change. And I don't have any eventlisteners for scrolling. I know the question is broad range but I couldn't find any way out.

Does anyone have any idea ? Can it be a DOM Problem ?

Answer 1

Have you tried on Firefox or mobile browser? Your problem is related to event listeners. Try adding

document.addEventListener('touchstart', handler, {passive: true});

to prevent PreventDefault.

Answer 2

The reason why it was flickering and not letting to go down on the table was first row which is a list created with empty strings "" . When I filled the first list with any character, the problem is solved.