Current behavior
Attempting to start a selection in an element where user-select is none, such as by clicking in it or starting a drag in it, must not cause a pre-existing selection to become unselected or to be affected in any way.
View in spec
Expected behavior
New behavior:
Attempting to start a selection in an element where user-select is none, must cause a pre-existing selection to become unselected.
The reasoning
The current behavior results in a bad user experience; Because the user is unable to unselect a selection which is an unexpected behavior. Any attempt to unselect a selection such as text must not be prevented.
Normally, users can deselect any selection by clicking anywhere inside the web page. When user-select: none is used on some elements, they become deadzones that clicking on them does not deselect and results in feeling something is wrong.
Minimal reproduction of the issue
<body style="user-select: none;">
<p>This text can't be selected and that's expected.</p>
<pre style="user-select: text;"><code>console.log("This code can be selected but can't be deselected when clicking anywhere outside of it.")</code></pre>
</body>When you click anywhere outside of pre, the selected code cannot be deselected.
In this whole canvas your try clicking in a white area to deselect but it won't work.
You could also view the attached video example in chromium issue report.
Why user-select: none is useful
It can prevent issues like this in web pages:
This one is a screenshot from an electron desktop app:
So, user-select: none is super useful because it prevents issues like this. In web pages in most have happened to so many peopel where by mistake you get all text content selected. This this annoying, bad UX, and looks cheap and buggy to the user; When I look that above screenshots, it gives me discomfort and feeling of being trapped. Using user-select: none makes the web page feel more like an app that a text document.
Web tools are used for making desktop apps (with tools like electron, etc) and this makes user-select: none more necessary and useful than ever. Using user-select: none makes these apps feel more like a native app than a cheap web document wrapped in a desktop window.
Workaround
Workaround
<style>
::selection {
background: transparent;
}
pre ::selection {
background: blue;
color: white;
}
</style>
<p>This text can't be selected and that's expected.</p>
<pre><code>console.log("This code can be selected but can't be deselected when clicking anywhere outside of it.")</code></pre>Maybe this could be a good workaround for devs and usecases. Content is still selectable but its background is transparent so isn't not visible and not annoying. Note that because the content is still selectable, it may cause issues depending on your usecase. You would loose the default blue color and would need to apply a custom (both) background and color. I have not tested this on a real project so it may not be ideal.
Refs
Current behavior
View in spec
Expected behavior
New behavior:
The reasoning
The current behavior results in a bad user experience; Because the user is unable to unselect a selection which is an unexpected behavior. Any attempt to unselect a selection such as text must not be prevented.
Normally, users can deselect any selection by clicking anywhere inside the web page. When
user-select: noneis used on some elements, they become deadzones that clicking on them does not deselect and results in feeling something is wrong.Minimal reproduction of the issue
When you click anywhere outside of
pre, the selected code cannot be deselected.In this whole canvas your try clicking in a white area to deselect but it won't work.
You could also view the attached video example in chromium issue report.
Why
user-select: noneis usefulIt can prevent issues like this in web pages:
This one is a screenshot from an electron desktop app:
So,
user-select: noneis super useful because it prevents issues like this. In web pages in most have happened to so many peopel where by mistake you get all text content selected. This this annoying, bad UX, and looks cheap and buggy to the user; When I look that above screenshots, it gives me discomfort and feeling of being trapped. Usinguser-select: nonemakes the web page feel more like an app that a text document.Web tools are used for making desktop apps (with tools like electron, etc) and this makes
user-select: nonemore necessary and useful than ever. Usinguser-select: nonemakes these apps feel more like a native app than a cheap web document wrapped in a desktop window.Workaround
Workaround
Maybe this could be a good workaround for devs and usecases. Content is still selectable but its background is transparent so isn't not visible and not annoying. Note that because the content is still selectable, it may cause issues depending on your usecase. You would loose the default blue color and would need to apply a custom (both) background and color. I have not tested this on a real project so it may not be ideal.
Refs