Scroll Jumping and Multi cell gets selected on cell click

Tags: #<Tag:0x00007efc72fc9890>
#1

Hi Team,

I am facing couple of issues when using Handsontable for displaying of data:

  1. If there is a large data, when I scroll down and click on a cell, it multi selects the cells in that columns. See the screenshot below:
    image.png1332×465 14.8 KB

I tried the setting selectionMode: 'single' doesn’t help though.

  1. Next issue I am facing, when I press enter on the cell, I have a function to generate the next number in the hierarchy, due to which I reload the data into handsontable, even on insert row, scroll jumps and comes back to selected cell.

I am using merge cells feature, it gets called after the data is loaded, as the data is dynamic, merge cells is called in updateSettings function of handsontable. Please let me know if you need some more inputs.

Thanks,
Vani

#2

Hey @vanivkulkarni

Can you replicate the same issue in JSfiddle? I’d like to test it.

#3

Yeah, sure will do it and send it across. Since the data is dynamic and merging also is done dynamically, I will need some time to replicate and hard code the data to create the fiddle. Please bear with me.

#4

Can you replace the data with our helper Handsontable.helper.createSpreadsheetData(1000, 1000)?

#5

The simpler the example the easier it is to replicate the issue.

#6

Hi @aleksandra_budnik,

We think our application css was disturbing the handsontable behavior. I removed all the css and used basic features, looks like jumping issue is resolved. I will get back if it occurs again.

Thanks,
Vani

#7

I’m glad that you’ve found the reason what that happened. Thank you for an update.

#8

We have this same issue in our project. The behavior of the tables should not be negatively affected by custom CSS, but it’s calculating things from the wrong starting position. This scroll jumping issue is part of a bigger problem where certain features of handsontable do not work correctly when the table is nested within a container, particularly a container that has scrolling enabled.

I reported on a similar issue on HOT Github issues regarding the rendering of TextEditor, SelectEditor, and Comments elements. The gist of it is that the placement of these elements should be calculated relative to the container element, not the document. You can read about my solution here.

By the way, this has still not been fixed since it was posted almost a year ago.

For this particular issue of scroll jumping, there is a workaround until the proper positions are calculated. So @vanivkulkarni, don’t remove your custom CSS that you probably need for your site layout. Instead, disable scrolling in the afterSelection callback.

afterSelection: function(r, c, r2, c2, preventScrolling, selectionLayerLevel) {
preventScrolling.value = true;
}

Thanks,
Lance

1 Like
#9