[GH #4625] Cannot click on HTML <a>nchor using Chrome on mobile phone

Tags: #<Tag:0x00007efc61c350c8> #<Tag:0x00007efc61c34ec0>
#1

Summary

I am using HOT to render a table where some columns include HTML content, including clickable links. This works just fine on a desktop and on some mobile devices (I’ve been told iPhones work just fine). However, on an Android phone using Chrome, the links cannot be clicked.

There is a fiddle which illustrates the problem. You’ll see:

  • A cell with a link.
  • A handler for the afterSelection hook which turns the selection off. I added this after noticing in the docs that the cell selection mechanism is not disabled by setting the column “readOnly: true”.

Expected behaviour

It should be possible to click the link to www.google.com on an Android device using Chrome.

Actual behaviour

The link does not respond to a touch click. Pressing on the link for an extended period of say 1 second causes a popup to appear offering several options such as to open the link in a new tab etc.

#2

Hi @srhaque

please share progress to the following issue report https://github.com/handsontable/handsontable/issues/4625

ps. please remember that Handsontable is not a fully mobile-friendly library and we priorities issues with high and regression labels.

#3

Hi @aleksandra_budnik, I’d be happy to use issue 4625 except that I’m not clear how the example code presented there relates to this issue (especially as that report is for iOS, and I’m told my example works as expected on iOS). Can you clarify what “fixed area” means in the context of 4625?

#4

The fixed area stands for the use of fixedColumnsLeft in the first column. However even without fixing the column if the data is editable, there is no way to open a link. It is a general touch event issue.

#5

Is “editable” different than the opposite of “readOnly”?

#6

The editor can be turned on or off, and the readOnly state can be turned on or off. The editor usually blocks only editing but you are able to use fill-handle or copy/paste. ReadOnly cell should block all these actions.