When a row is highlighted anchor link inside a cell is not clickable

Tags: #<Tag:0x00007f8b235556a8>
#1

We have a custom renderer inside a table for URL. so cell will display a URL just like a Title column in this demo -> https://jsfiddle.net/kspz4efg/

when we select rows and then try click on anchor link url is not clickable in this case. You can reproduce in the demo given above. On loading of a table entire rows are selected and when I try to click on any link from title column nothing happens and my selection disappeared. I do not want this.

What i want is when row is selected and user click on anchor , then row should keep selected and anchor tag should be clickable. Any solution for this will be very helpful.

#2

Hey @manthanp

You have to add target='_BLANK' to the link
https://jsfiddle.net/hbdwr351/
Here’s a related topic https://github.com/handsontable/handsontable/issues/4327

#3

Thank you @aleksandra_budnik for quick response. We do have target=’_BLANK’. and it is working properly. However when a row is selected/highlighted at that time anchor click is not working. Below is the quick demo.
https://hub.mangoapps.com/sf/MjI2NjY2XzE5ODY0NjM

That is what I have try to imitated on demo that I have shared on my ticket . https://jsfiddle.net/kspz4efg/

On load if you see all rows are highlighted and when rows are highlighted a tag is not clickable regardless of target=’_BLANK’.

#4

It works well here https://jsfiddle.net/7jmvaxbc/ It just requires two clicks (one select the cell, second opens the link) if you click a row header. Are you able to open the link with that demo?

#5

No. If you see in a demo. we highlight the row and when user clicks on a anchor while the row remain highlighted then it did not work.
When row header is clicked, then I am not able click. so anchor tag is there but event does not reach to to a tag because the row is highlighted. As row is highlighted, Any event I attached to the anchor tag it does not work. That is actual issue.

Note: If row is not highlighted then it works fine. I am talking about entire row not just a single cell.

#6

I will investigate this subject but can confirm one thing? Does it open the link if you click two times (that happens on my device) or it does not fire at all - no matter how many clicks you make?

Also please share your OS/Browser information.
I’m testing this on Chrome 80 / macOS Catalina on a touchpad.

#7

@aleksandra_budnik Yes. on clicking 2 times it will work because. On first click the row highlight is removed once the highlight is removed I am able to click on a cell.

see detailed demo: https://hub.mangoapps.com/sf/MjI3MTgzXzE5ODczNTQ

OS : Windows ,Browser : Google Chrome.

However, I feel this does not have issue with any OS and browser, this is javascript issue. Once the row remain highlighted at that I am not able to click on a a tag.

#8

I can see where’s the issue.

https://jsfiddle.net/seht39cd/

I’ve added

  beforeOnCellMouseDown: function(event) {
			console.log(event.target)
    },

to the settings.
When we have a whole row selected, and click the link the target is

<td class="current highlight"><a href="http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691" target="_BLANK">Professional JavaScript for Web Developers</a></td>

when it already should be

<a href="http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691" target="_BLANK">Professional JavaScript for Web Developers</a>

The click doesn’t go deep enough. I will check that tomorrow and share my thoughts.

#9

We just got a new branch for tests for beta2 of Handsontable 8.0.0 and I won’t be able to investigate this subject soon but I will update you once I have a chance.

ps. you can check the depth of the target. Maybe there’s some workaround.

#10

Hey,

have you had time to investigate this subject further?

#11