Triple-click selects the next element with Angular Bootstrap modal - angularjs

Question

I have an Angular application using (UI) Bootstrap and I'm displaying a URL in a modal-body inside well and code elements. The modal-footer just has a Close button. Now if one triple-clicks the URL to copy it, the Close button text in the footer is also selected and one can not paste it to another tab as usual.
Fiddle here
<div class="modal-body">
<div class="well">
<code>http://www.google.com/</code>
</div>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
I have searched a lot but cannot come up with a solution (have tried CSS's user-select, wrapping it in different elements, which do not seem to work).

Answer 1

Replace <button> by <input> to disable text selection:
<input type="button" ng-click="close()" class="btn btn-primary" data-dismiss="modal" value="Close"></input>
Updated Fiddle

Answer 2

Not exactly a scientific or technical answer (as I don't fully grasp the browser's Selection API); but what I have observed is that when you triple click the last child element in a DOM branch, it creates a hanging selection (for lack of a better term).
By hanging selection, I mean that it tries to look for the next selectable text element, but since it's the last child that was selected, it traverses the DOM to find the next text element. In my specific case, I was dealing with something like this:
<div>
<h2>Section Header</h2>
<div>
<p>foo</p>
<p>bar</p><!-- triple clicking this would select the next h2 content!! -->
</div>
</div>
<div>
<h2>Next Section Header</h2>
...
</div>
The solution I arrived at came from the naive thought of "give it something else to select" so that it wouldn't go looking elsewhere in the DOM. So this definitely feels more like a hacky workaround, but simply inserting 0-height <br> elements (so as not not affect the existing layout) immediately after any content that I expect users may try to triple click solved all of my issues.
So in OP's case
<div class="modal-body">
<div class="well">
<code>http://www.google.com/</code>
<div style="line-height: 0px;"><!-- line-height is what affects br height, and you can't apply line-height directly on br tags for whatever reason -->
<br />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" ng-click="close()" class="btn btn-primary" data- dismiss="modal">Close</button>
</div>
At the time of posting this, there isn't much info about these types of issues so I figured I would share what worked for me in hopes that it helps someone else.
One good source of info I did find was in the form of a github issue comment here
It turns out there are a bunch of ways to cause hanging selections (because of the nature of the functionality I'm building, I could only verify that my solution works for #1 and #4):
triple-click on a paragraph
place the cursor at the beginning of a paragraph, shift-arrow-down past the end of the paragraph
place the cursor at the beginning of a paragraph, shift-arrow-right to the end of the paragraph (selects the text within the paragraph), then shift-arrow-right again (selects the whole paragraph)
drag the cursor from the beginning of a paragraph to the end (selects the text within the paragraph), then drag a little further / down (selects the whole paragraph)