Handsontable doesn't sync header scroll with body when Tab button pressed inside header and handsontable is inside scrollable container

Tags: #<Tag:0x00007efc64f26270> #<Tag:0x00007efc64f26108>
#1

Hello, I have such a case when I use inputs inside header cells and I need header to be scrolled together with body on Tab press when input in the header is active.

This case perfectly works when we have handsontable inside NOT a scrollable container.

But it doesn’t work properly when the handsontable is inside the scrollable container.
Here is the example for the latest 15.0.0 version: https://jsfiddle.net/qb8n3297/
Try to focus some input inside the header and press the Tab button multiple times so the header begins to scroll.

2025-01-09%2016_16_00-Edit%20fiddle%20-%20JSFiddle%20-%20Code%20Playground
2025-01-09 16_16_00-Edit fiddle - JSFiddle - Code Playground.png794×239 3.09 KB

When you remove CSS styles from the container, it will work well.

Is it a bug, or are there any workarounds for this? Or is it not intended to use handsontable inside a scrollable container?

#2

Hi @Maximilian

We used to have almost identical example in our documentation but it had the same problem. It’s caused by the fact Handsontable as multiple visual layers and in this specific case adding an object to the column headers results in desynchronization with scrolling.

Unfortunately, we don’t have any workarounds for this issue for now. I will let you know once we change the internal structure and such modifications will be possible without any issues.

#3

Thank you a lot for your quick response.
Can you tell me how can I track the fix if such appears? Maybe there is already created issue for this?

#4

Hi @Maximilian

It’s a larger project split into multiple issues and it’s on our internal board so I’ll keep you updated.

#5

Hi. Got it. Thanks.