I am trying to render the handsontalbe inside webcomponent (shadow dom). Table is getting rendered but I am not able to values in the cell dropdonw. Getting script error as shown in Image.
Does handsontable supports webcomponents ? I am using handsontalbe version 0.38.1 community edition
I got a demo from my colleague where the dropdown cell type works as expected and does not show an error https://codesandbox.io/s/thirsty-star-ynumk?file=/src/hot-table.js
Could you fill that demo with your settings, please?
Thanks @aleksandra_budnik for the reply.
I was using stenciljs to create web component. when I removed the shadow dom its working fine but when I enabled shadow dom its giving the above issue.
Thanks for the demo. then it looks like the issue is with the stenciljs framework.
Do you have any suggestion for how to debug or where to start to find to root cause when using with stenciljs ?
What does this ‘wrap’ and ‘unwrap’ method does in the handsontable source code ?
First of all, we do not support stenciljs officially, and as far as I know, we do not plan to do it.
However, I was curious if the newest version of Handsontable solves this problem. Unfortunately, it doesn’t.
With a superficial investigation, I suppose that the problem is somewhere in the async execution of validating process. For some reasons, something from stenciljs deselects the currently editing cell. It doesn’t happen in other frameworks, vanillajs or vanillajs+shadowdom.
Perhaps an additional condition in https://github.com/handsontable/handsontable/blob/master/src/editorManager.js#L157 will help to exit EditorManager.prepareEditor safely. On the other hand, editors with that change might work unstably.
Methods wrap and unwrap are the internal helpers to run Handsontable in the Polymer framework.
Thanks @piotr.laszczkowski, for the quick reply. We were able to debug the issue (kind of silly one). It turns out handsontable is hard coded custom element tag name to ‘hot-table’. In our stenciljs project we used the different one . Once we changed to ‘hot-table’ everything is working as expected
Is there any plans to make this generic with out hard coding the directive(tag) name for custom components ?
Thank again for the quick reply @piotr.laszczkowski and @aleksandra_budnik
Sorry for skipping your question. Since April, we have opened Github Discussions, so I highly recommend adding new ideas there. At the moment, though, we do not plan to add this functionality.
