Autocomplete arrows are also getting copied when we copy all the data in handsontable

Tags: #<Tag:0x00007efc72fb3810>

Hi,

In handsontable, if we copy all the data in the table that contain autocomplete down arrows, the arrows are also getting copied. After copying all the data in handsontable, I try to paste the copied data in a editor. The down arrows are also getting pasted.

I have added the jsfiddle here for demo https://jsfiddle.net/teaxy317/1/

image

image

Please let me know, if there is a way to avoid this down arrow on paste.

Thanks,
Karthikeyan

Hi @kvengadachalam

In Handsontable we copy data while selecting whole cells, not only their data. So if you have

disableVisualSelection: 'area', enabled this is an intended behavior, as then you copy the text, not the whole cell.

Hi,

Actually, I tried removing disableVisualSelection as well. But, still when I tried to copy all the data, the autocomplete symbol was also getting copied.

Our usage of handsontable involves, copying handsontable data and pasting it into excel spreadsheet. This autocomplete symbol is actually makes the excel going mess with arrow symbols. Since, user had to copy the data even when readonly mode we are using fragmentselection: true.

It will be really helpful if we get rid of the arrow icons while copying data in read mode.

Thanks,
Karthikeyan

My bad. I should have added the fragmentSelection, so

fragmentSelection: true,
disableVisualSelection: 'area',

makes you select more than one cell and copies only values of cells (without arrows). Copy/paste is tightly connected to the selection of cells, so if you want to copy a cell you need to enable the selection.

Hi @aleksandra_budnik,

Actually i am using both fragmentSelection: true & disableVisualSelection: ‘area’ in the below demo link: https://jsfiddle.net/teaxy317/1/

But still when i tried to copy all data in tabel, arrows are still getting copied. Please check this out in the demo.

Steps to reproduce the issue.

  1. Copy all the data in the table by dragselect.

  2. Paste the copied data, somewhere in the editor space.

Please check it out.

▼BMW 2017 ▼black ▼black
▼Nissan 2018 ▼blue ▼blue
▼Chrysler 2019 ▼yellow ▼black
▼Volvo 2020 ▼white ▼gray

Thanks,
Karthikeyan

Those options should be disabled. How does it work now https://jsfiddle.net/srwkh2a3/1/?

Hi,

After removing the options, the arrow icons are not getting included.

But is there a possibility to highlight the text inside the cells while dragselect using cursor pointer like below image?

So i guess fragmentSelection is important in that scenario?

image

Hm… not an elegant approach https://jsfiddle.net/9rcsgy3h/3/ But it will allow you to copy cells and keep the selection of text inside cells - you need to use a custom renderer.

Here’s the outcome

32

I skipped the grey background for the arrow as I did not assume you’d like them to be “selected” as well. But if you want to add the background to them as well use this line instead (bg className added to arrow element).

Hi @aleksandra_budnik,

This is great. This really helps me to avoid arrow icons. Thanks for giving me an immediate solution!!!

You’re welcome @kvengadachalam :slight_smile: I’m glad I could help.

ps. I’m closing this thread as solved.