Repeatedly changing the height will cause it to crash.

[sinbino]

Description

Repeatedly changing the height will cause it to crash.

Steps to reproduce

1. Go to jsfiddle below.
2. Press the "SWITCH HEIGHT" button repeatedly.
3. It freezes after about 20 times and the console reports a js error.

[Vue warn]: Error in callback for watcher "mergedHotSettings": 
(found in <HotTable>)
RangeError: Invalid array length
    at Array.concat (<anonymous>)
    at getListWithInsertedItems (handsontable.full.js:55764)
    at PhysicalIndexToValueMap.insert (handsontable.full.js:39878)
    at handsontable.full.js:40049
    at Map.forEach (<anonymous>)
    at MapCollection.insertToEvery (handsontable.full.js:40048)
    at handsontable.full.js:75461
    at IndexMapper.executeBatchOperations (handsontable.full.js:75019)
    at IndexMapper.insertIndexes (handsontable.full.js:75454)
    at helpers.ts:64

The handsontable 8.1.0 only demo will not crash.
The handsontable 8.1.0 and @handsontable/vue 5.1.0 demos will crash.

Our requirements are as follows.

• I must use @handsontable/vue.
• I need to dynamically change the height of the handsontable to fit the window size. To do so, I dynamically change the handsontable settings.height parameter.

Demo

This will cause a crash.
handsontable 8.1.0 + @handsontable/vue 5.1.0
https://jsfiddle.net/sinbino/19r26cq3/

This will not cause a crash.
handsontable 8.1.0 only
https://jsfiddle.net/sinbino/nmw8j4s5/

Your environment

• Vue wrapper version: 5.1.0
• Handsontable version: 8.1.0
• Browser Name and version: Chrome 86.0.4240.80
• Operating System: MacOS Catalina 10.15.7（19H2）

[sinbino]

Repeated updates to settings.hiddenColumns.columns yielded the same error.
The crash may be caused by repeated changes to settings.

[AMBudnik]

HI @sinbino

that's an interesting finding.

I was able to hang the resizing process on 15. And then it became nearly immune to change while having more than 40 for the non-crashable example. Then I tried to be more gentle and wanted 2-3 seconds before clicking the button. At 15 it started to lag and at 18 it was already broken.

Version 8.0.0 https://jsfiddle.net/pf3Lw5qt/ works the same.

I do not see any abnormalities in the Performance Monitor. We get the initial load and a flat line while clicking the button 18 times.

And here's a screenshot from the time after 17 click when table was frozen till the last render of the table.

[sinbino]

Is there any progress in this matter?

Sorry, I'm currently too busy with my own projects to start collecting additional information on this matter

But I think it's an @handsontable/vue issue, as it's easy to reproduce and doesn't occur in plain handsontable.

The dynamic change in height is unavoidable if I want the table height to follow the window size, so I think it's a relatively serious problem. (To be exact, I need to implement a layout with flexbox header outside of the handsontable.)

[AMBudnik]

Thank you for sharing the additional findings. I am still waiting for this issue to make it to the milestone.
I will notify you when that happens.

[mrpiotr-dev]

Hi @sinbino,
We merged wrapper for Vue.js into our main repository, handsontable/handsontable. Now library and wrapper are available in monorepo.
We also transfer all issues into one common issue board, where you can follow work progress and request issues.

[aninde]

This issue will be fix by the upcoming v12 https://jsfiddle.net/0gdsu4b9/1/ .

[sinbino]

@aninde
Thank you.

[AMBudnik]

Hi @sinbino

I have the pleasure to let you know that Handsontable v12 where this issue is fixed is live.

For everyone who is tracking changes to this topic please check our release notes https://handsontable.com/docs/release-notes/#_12-0-0 and the migration guide https://handsontable.com/docs/migration-from-11.1-to-12.0/#step-1-verify-your-updatesettings-calls