How can I use copy and paste with a Handsontable rendered inside Blueprint.js Overlay component?

Getting help Questions
1

I have a Handsontable rendered inside an Overlay component from Blueprint.js and I have enabled copyPaste, copyable inside the config options but it just won’t copy or paste. Is it because of the Overlay component? What can I do to get around this?

2

Sorry but I am not familiar with Blueprint.js. Do you get any console logs or can you share a demo?

3

I can’t demo anything. I’ll be more specific with the problem, however. I am actually opening two Overlays and two handsontable. I render component 1 which is an overlay containing Handsontable 1, and a button click in one of the cells will pop up another overlay which has Handsontable 2. The curious thing is that this 2nd handsontable’s cells can not be copied or pasted into at all. I can click on them and enter data normally but copying and pasting with ctrl-c and ctrl-v does not work all.

Blueprint.js knowledge, would anything about the way its being rendered have anything to do with this? Does the copyPaste textarea element get muddled by the fact that there is two HOT existing in the DOM at the same time?

4

That shouldn’t be a problem. Here Handsontable example - JSFiddle - Code Playground you also have 2 instances and you can copy/cut/paste into their bodies.

I think that the Blueprint logic may not correspond well with the logic of Handsontable. Here Handsontable example - JSFiddle - Code Playground I’ve made an example with two layers (added a window) and I can easily edit and copy/paste between the tables even where they are both visible.

Am I missing any steps that you’ve tested?

5

Thanks! I ended up figuring out and yeah it is something to do with the Blueprint Overlay. When I render the handsontable directly inside of a blueprint Overlay, it gives me this error and apparently it’s because the Overlay blocks the CopyPaste textarea from being accessed. The reason it worked for Overlay 1 is because it was not directly rendering a HOT, but rather a component that rendered a HOT. Changing Overlay 2 to render a Wrapper for a HOT instead fixed the issue.

6

Also that second Handsontable in the Overlay has a weird issue where in the afterChange hook after I make a change, the oldVal in the changes array is undefined despite there being data displayed on the table. It’s not like that for the first table. I’m not quite sure what could cause this. Would you have any ideas?

7

Hm…

I do not know if I’ll be able to test it. Here http://jsfiddle.net/handsoncode/dqrr005f/ (updated demo from above) we get correct values in the changes array for both tables.

I haven’t seen this hook to return undefined. Theoretically, I would return such a response if it hasn’t got the data in the first place.

If you do a simple

afterChange: function(chns, src) {
    console.log(chns, src)
  }

do you get

null "loadData" in the console?

8

No, i get the array of changes, everything fine but oldVal as ‘undefined’ and ‘edit’ as the source.

9

Related issue is that double clicking a cell causes the contents to be deleted. I found this GitHub issue relating to it. https://github.com/handsontable/handsontable/issues/4487
And my columns when it first gets loaded do have periods in them.

Perhaps that is why it affects the beforeChange and afterChange?

10

Hi @vtruong74

It looks like the dot may be a problem. The last comment from Cell deleted on double-click when there's a dot in the column name · Issue #4487 · handsontable/handsontable · GitHub is from our developer, where he wrotes that

Dot-notation is necessary to finding nested keys in dataset. That means you shouldn’t define an array of objects with dots inside the keys:

11

Yeah that should be the issue. Thanks!

12

You’re welcome.