Rangy commonAncestorContainer wrong when using anchor without href

Question

I'm using Rangy in conjunction with AngularJS. Angular replaces href with ng-click, so calling a function becomes:

<a ng-click='theFunctionThatCallsRangy()'>Get Range</a> 

Unfortunately,

range.commonAncestorContainer

is returning the node of the anchor instead of the selection:

<a ng-click='theFunctionThatCallsRangy()'>Get Range</a> 

and

range.collapsed

returns true. This leads me to believe clicking the anchor responsible for generating the range is destroying the selection before the range can be created from the selection.

As soon as I modify the anchor to:

<a href='#' ng-click='theFunctionThatCallsRangy()'>Get Range</a> 

the range is created as expected. However, adding href='#' causes Angular to redirect to the root domain ('/'). Swapping out <a> for <button> also works, however this breaks existing CSS.

Why is this happening? Does Rangy expect href to be present in anchor tags? Workarounds?

Answer 1

Rangy is only reporting what the browser tells it about the selection and has no opinion about whether the href attribute is present. As you correctly diagnosed, the problem is that when you click on an <a> element, the existing selection is destroyed by the time the click event fires. Assuming you continue using these <a> elements, your options are:

• Use the mousedown event instead
• Make the <a> element unselectable, which will obviously have its own consequences

Demo: http://jsfiddle.net/M6AAy/