Bug 118009 - user-select: none shouldn't affect editability
Summary: user-select: none shouldn't affect editability
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: HTML Editing (show other bugs)
Version: 528+ (Nightly build)
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Tim Nguyen (:ntim)
URL:
Keywords: BlinkMergeCandidate, InRadar
: 82692 (view as bug list)
Depends on:
Blocks: 208677
  Show dependency treegraph
 
Reported: 2013-06-25 19:24 PDT by Ryosuke Niwa
Modified: 2022-04-19 11:25 PDT (History)
16 users (show)

See Also:


Attachments
Patch (37.73 KB, patch)
2022-04-19 05:56 PDT, Tim Nguyen (:ntim)
koivisto: review+
ews-feeder: commit-queue-
Details | Formatted Diff | Diff
Patch (41.13 KB, patch)
2022-04-19 08:54 PDT, Tim Nguyen (:ntim)
ews-feeder: commit-queue-
Details | Formatted Diff | Diff
Patch (41.15 KB, patch)
2022-04-19 10:02 PDT, Tim Nguyen (:ntim)
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Ryosuke Niwa 2013-06-25 19:24:49 PDT
Consider merging https://chromium.googlesource.com/chromium/blink/+/986d2d7a2fea8566f91517ff4e3e42f0248ed6be

This patch makes CSS property |user-select:none| not to affect editability as IE and FireFox. 

However, selection behavior different among browsers:

- Chrome: selection works as |user-select:text|.
- FireFox: selection works as |user-select:text| for text input and textarea. In other elements, selection can be extended by cursor key. Mouse click always set caret to start of text.
- IE: Selection can not be extended neither cursor key nor mouse click.

* editing/selection/4866671.html: Replaced with editing/selection/user-select-none-in-editable.html

* editing/selection/5779984-1.html: Replaced with editing/selection/user-select-none-in-editable.html and user-select-js-property.html, for style.webkitUserSelect property.

* fast/events/standalone-image-drag-to-editable.html: Convert to text test instead of pixel test for updating reference images, since the final image is colored with selection color.
Comment 1 Ferdy Christant 2020-03-02 14:39:58 PST
This code....

*, *:before, *:after {
  user-select: none;
}

Is sometimes used by people to avoid text selection alltogether, mostly in a PWA or Add to Homescreen scenario. 

The above code completely blocks keyboard input on input fields. This is only an issue on mobile Safari, as far as I was able to test.

Is this 2013 bug I'm commenting on the same scope? Any plans to pick it up?
Comment 2 Ryosuke Niwa 2020-03-02 22:48:02 PST
(In reply to Ferdy Christant from comment #1)
> This code....
> 
> *, *:before, *:after {
>   user-select: none;
> }
> 
> Is sometimes used by people to avoid text selection alltogether, mostly in a
> PWA or Add to Homescreen scenario. 
> 
> The above code completely blocks keyboard input on input fields. This is
> only an issue on mobile Safari, as far as I was able to test.
> 
> Is this 2013 bug I'm commenting on the same scope? Any plans to pick it up?

This is indeed the bug that tracks this issue.

It's a bad idea to have such a style on the entire page since it would prevent users from selecting any text even if fixing this bug was a good idea.
Comment 3 Ferdy Christant 2020-03-03 03:51:36 PST
Agreed on both accounts: that this is a bad practice, and that regardless of the practice, it's still a bug.
Comment 4 Tim Nguyen (:ntim) 2022-04-15 11:10:04 PDT
There's effectiveUserSelect() that can be changed to take in account user-modify.
Comment 5 Tim Nguyen (:ntim) 2022-04-19 05:56:00 PDT
Created attachment 457879 [details]
Patch
Comment 6 Radar WebKit Bug Importer 2022-04-19 05:59:20 PDT
<rdar://problem/91955044>
Comment 7 Tim Nguyen (:ntim) 2022-04-19 06:09:58 PDT
*** Bug 82692 has been marked as a duplicate of this bug. ***
Comment 8 Antti Koivisto 2022-04-19 06:10:17 PDT
Comment on attachment 457879 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=457879&action=review

> Source/WebCore/rendering/style/RenderStyle.h:630
> +    UserSelect effectiveUserSelect() const { return effectiveInert() ? UserSelect::None : (userModify() == UserModify::ReadOnly ? userSelect() : UserSelect::Text); }

Maybe just move this out-of-line and make it multiline with ifs? Nested ternary operators are difficult to read.

> LayoutTests/ChangeLog:9
> +        - Added new tests for new behavior (imported from the Blink codebase)

Is a WPT possible?
Comment 9 Tim Nguyen (:ntim) 2022-04-19 08:54:33 PDT
Created attachment 457900 [details]
Patch
Comment 10 EWS Watchlist 2022-04-19 08:57:08 PDT
This patch modifies the imported WPT tests. Please ensure that any changes on the tests (not coming from a WPT import) are exported to WPT. Please see https://trac.webkit.org/wiki/WPTExportProcess
Comment 11 Tim Nguyen (:ntim) 2022-04-19 08:57:26 PDT
Submitted web-platform-tests pull request: https://github.com/web-platform-tests/wpt/pull/33694
Comment 12 Tim Nguyen (:ntim) 2022-04-19 10:02:54 PDT
Created attachment 457910 [details]
Patch
Comment 13 EWS 2022-04-19 11:25:01 PDT
Committed r293028 (249767@main): <https://commits.webkit.org/249767@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 457910 [details].