Cannot remove selection anymore by clicking outside of the selection in the same line


(Anton) #1

This does not look like Google Chrome issue - because it works as expected in other websites.

Reproduction steps:

  1. Select a piece of text you would like to quote.
  2. Change your mind and try to remove the selection by clicking somewhere outside of the selected text, but on the same line where the text is. Selection is not removed. This is annoying.

For me this happens when I click to the right or to the left of text in a blank area where there is no text anymore.

I tried in many other websites and could not reproduce this, so I suppose it is specific to Discourse.

On the screencast below, you can’t see where the mouse is - but actually I’m clicking just to the right of the selected text.


(Mittineague) #3

It happens when you select the text at the end of content inside a block level p tag.

If you click outside of the p tag area the selection is removed. If within, it isn’t.

If you select text that isn’t at the end the selection is removed regardless of where the click is.

(I added a custom CSS outline to p tags to help visualize)

In other words, when selecting ending text, the entire remaining whitespace inside the p tag is also selected so in effect you are not clicking outside of the selection but on it.

Likewise for beginning text and clicking to the left of it, except the area is less.


(Anton) #4

If it wasn’t an issue, I would have not created a topic about it.

The behavior has definitely changed. It was okay, and then after an update it started to bother. That’s why it is in the UX category.

Finally, why should this work a different way than on all other websites - is there any reason for such behavior?

As soon as I click on any pixel outside the selection, it should go. It’s a usability issue. Even if it’s small, why it is there at all? I suppose there is something going wrong, so preferably it should be fixed.


(Mittineague) #6

There has to be some reason, whatever it is.

My guess is it has something to do with line 35 in
app/assets/javascripts/discourse/views/quote-button.js.es6

let onSelectionChanged = () => this.selectText(window.getSelection().anchorNode, controller);

i.e. getSelection is the start-to-end range, anchorNode is the p tag

According to MDN

Selection - Web APIs | MDN
Selection.anchorNode - Web APIs | MDN

This is an experimental technology
Because this technology’s specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.


(Jeff Atwood) #7

I can’t repro this in Chrome latest here. I can select, then click on the same line (to the right or left of the existing selection) and selection is removed. So this is no repro for me.


(Régis Hanol) #8

I can (often) reproduce in Chrome latest when the the selected text includes the last part of a paragraph. But from what I remember from the code, this is going to be hard to fix. Selection is a very weird API.