Error accessing CellMeta for Header: Expecting an unsigned number

Tags: #<Tag:0x00007f8b1d2dd278>
#1

I’m using handsontable in an ember.js app.

The initial rendering of the table is fine, but when the data changes, I get an error: Assertion failed: Expecting an unsigned number..

It seems this doesn’t happen when row headers are set, but when hasRowHeaders is false.

In this case it’s a table with a single row plus colHeaders. I’m using handsontable version 9.0.0

I’ll add a few screen grabs of the debugger that show when the error is happening: column index is 0, columnModifier is 1, there is no mapped physicalColumn, thus trying to lookup CellMeta for a negative index, which results in the assertion error.

46
Screenshot 2021-07-02 at 15.29.46.png3297×1896 1010 KB

59
Screenshot 2021-07-02 at 15.29.59.png3297×1896 925 KB

07
Screenshot 2021-07-02 at 15.30.07.png3297×1896 944 KB

Well, I guess this is still a somewhat vague description. Let me know what else I can provide or if you have some initial idea of what could be the issue.

Thanks,

Daniel

#2

Hi @groeger

I’ve used the same steps as mentioned here Handontable not working with ember but with Node 14.0 and Handsontable v9.0.1 and removing rowHeaders does throw any errors in my project.

You can find it zipped here https://we.tl/t-LtyLqf3Nh8 (run npm i before serving)

Maybe there are some additional settings that have an impact on that.

#3

Thanks for you quick reply.

Here is a minimal reproduction of the error based on your example: https://we.tl/t-35dkaWF3Zl

I wrapped handsontable in an ember component. As soon as the data/columns change (when clicking the button), the error is thrown.

The example uses 9.0.0 but the same thing happens on 9.0.1

#4

Thank you for sharing the project, Daniel.

I’ve replicated the bug. But as I do not know Ember I’ve asked my colleague to check that as well. We should get his feedback soon.

#5

Hi @groeger,

The glimmerjs/glimmer-vm causes the issue - it is a mechanism to manage components’ lifecycle. Internally this mechanism keeps a reference to the ember component - in your case, wrapping component passes a reference to Handsontable.

/* AppendSafeHTML */
  , vm => {
    var reference = vm.stack.popJs();
    var rawValue = (0, _reference.valueForRef)(reference).toHTML();
    var value = isEmpty(rawValue) ? '' : rawValue;
    vm.elements().appendDynamicHTML(value);
  });

One of the actions glimmer-vm do is creating HTML from components models. So it’s trying to run “.toHTML()” method on its components. Handsontable has its own .toHTML() method. Unfortunately, we have a regression https://github.com/handsontable/handsontable/issues/8041 that will be fixed in the next version of Handsontable.

However, I think the problem is in the passing incorrect reference to Handsontable instance instead of ember component. The only suggestion I have at the moment is to verify if you can separate Handsontable instance from the component virtualization.

Due to fact that we do not support EmberJS officially, you can contact us at support@handsontable.com. There we can offer a few options of additional services.

#6

Thanks for your help.

Decoupling the Handsontable instance from the ember component/template did in fact resolve this issue. So thanks a lot :slight_smile:

#7