Clicking on a link url within the link tooltip does not always take you to the url

[sachinrekhi]

I'm intermittently experiencing issues where when clicking on a link, seeing the resulting tooltip, and then clicking on the link url within the tooltip does not always take me to the webpage. It's an intermittent issue where sometimes it works but sometimes nothing happens. No error is shown in the console.

Steps for Reproduction

1. Visit beta.quilljs.com
2. Click the first link in the sample document
3. Click the second link the sample document
4. Click the third link in the sample document

Expected behavior:
Each time the link is opened

Actual behavior:
Only sometimes does it actually take me to the link

Platforms:
Chrome 51 on Mac 10.11

Version:
Quill 1.0 Beta 4

[jhchen]

Do you mean when you click on the link in the tooltip? When you click on a link in the editor the correct behavior is to always show the tooltip and never to navigate away.

[sachinrekhi]

Yes, the issue is specifically clicking the link in the tooltip (not the editor)

[jhchen]

When clicking the link in the toolbar does not cause navigation, does the tooltip also stay open?

[sachinrekhi]

No, the tooltip closes when you click on the link within it, but a new tab fails to open with that url.

[sachinrekhi]

Added a video to show the intermittent repro case in Chrome 51 on Mac 10.11:

http://cl.ly/0R102J0D2f2x

Could it be some kind of race condition between when the tooltip closes (removing link from the DOM) and when the link click handler action takes place?

[jhchen]

Actually it looks like the cause might be clicking above the link, but still within the tooltip.

[sachinrekhi]

You know I thought that might be the case but you'll notice when it doesn't work, you still get the pointer cursor and more importantly, if you look at the browser status bar at the bottom, it does show the link url, which it typically only shows when your mouse is specifically over a clickable link target.

[benbro]

I can reproduce.
Clicking on the link in the tooltip doesn't do anything.

Tested with Firefox 47 and Chrome 51 on Windows 7.

[jhchen]

So I think the root issue is a long click vs a short click. Mousedown currently blurs the editor which makes selection-change fire with a null range. So if a click action is not fast enough the browser seems to fire a mousedown first without the click event which would normally trigger navigation.

The solution could be to just not hide the tooltip when the editor selection becomes null. This would mean the tooltip would not hide when the user clicks outside of the editor. Does this sound like a reasonable compromise?

[sachinrekhi]

Alternatively could you trigger the click on mousedown event to see if that solves it? So attach a mousedown event handler on the link and trigger the click via something like this?

let mouseEvent = new MouseEvent('click')
linkElement.dispatchEvent(mouseEvent)

[jhchen]

That would solve the issue of a long click on the link but not clicking just outside of the link area. This would still cause the editor to blur and selection-change to null.

[sachinrekhi]

Personally I'm fine with solving long-click issue on the link (might need to apply same approach to Edit / Save / Remove actions as well) but still having the tooltip close when you don't click on one of the actions within the tooltip. I'd personally rather have that then not have the tooltip automatically hide when the user clicks outside of the editor since that would be somewhat of a hassle when you just want to move on to something else unrelated to the editor.