Vue3 issues

Tags: #<Tag:0x00007efc6488a3d0>
#1

I am using in a vue3 application (using vite bundler) and am having two issues that I can’t resolve:

  1. manualRowResize doesn’t work (when I hover, it does not present the resize tool like you see with manualColumnResize which does work in my app),

  2. When I left mouse click in one cell, the row header and the column header are highlighted, but I don’t get a blue box around the cell unless I double click. And then the small blue square at the bottom right corner of the cell does not appear. So, I’m not able to drag the contents of one cell down or across.

If I try to create a fiddle to reproduce this behavior, I am not able. Any suggestions on where I might look to resolve this?

Note: I do have a console error when I first load the app:
Uncaught TypeError: Cannot read properties of undefined (reading ‘defineComponent’)
at vue-handsontable.min.js:30:1364
at vue-handsontable.min.js:30:210
at vue-handsontable.min.js:30:344

using
“https://cdn.jsdelivr.net/npm@handsontable/vue@12.1/dist/vue-handsontable.min.js”

I am using @handsontable/vue3 ^12.1.3
handsontable ^12.1.3
vue ^3.2.38

#2

Hi @mv.wojak

If you are not able to create a demo maybe can you just send us your code for Handsontable configuration object? Also, do you use a custom styling or any CSS libraries?

#3

Thanks, Adrian.
I am using Bootstrap CSS libraries. I’ll try removing this and see what happens.

#4

Hi Adrian,
The problem was not the Bootstrap CSS libraries, but another CSS file I was referencing. After I removed the reference, the table started working as expected. Thanks for your help!

#5

Thank you for the update @mv.wojak

I’ll let Adrian know that the issue is solved. We can close this issue as done.

#6