2039690 - Firefox selects button-text when you click-and-drag inside of buttons (if they have 'user-select:auto')

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Daniel Holbert [:dholbert]]

Attachment: testcase 1

STR:

1. Load attached testcase (which has some buttons with user-select:auto).
2. Click inside the buttons and drag across the text.

ACTUAL RESULTS:
Text gets selected.

EXPECTED RESULTS:
Text should probably not get selected (because it's confusing if you were really just trying to click the button)

Note, Chrome lets you select the text if you click outside the button and drag across the button. But they don't let you select text if you start your click inside the button.

We probably need to fix this before we can make user-select:auto the default style for buttons in bug 1998331 (which we have webcompat reasons to want to do, as noted there).

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screencast comparing Firefox (left) vs Chrome (right)

Comment 2

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)]

Be careful about the editable case. Chrome allows to select and edit the text in <button>.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: testcase 2: with contenteditable

Comment 4

[Daniel Holbert [:dholbert]]

(In reply to Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(PTO: 5/2-5/10) from comment #2)

Be careful about the editable case. Chrome allows to select and edit the text in <button>.

Thanks, good callout. In contenteditable, specifically for <button> (first part of testcase 2), Chrome does indeed let you click-and-drag-within-the-button to select text, but only if your initial click is in the text part of the button (as opposed to the padding).

That seems to match how Firefox currently behaves for <input type="button"> (regardless of contenteditable), actually!

For true <button> (first part of testcase 1 and testcase 2), Firefox lets you click the padding-top and drag down to the padding-bottom, and select all the text in between.

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:alaskanemily, could you have a look please?

For more information, please visit BugBot documentation.

Comment 6

[David Shin[:dshin]]

Attachment: Bug 2039690: Prevent text selection from originating inside a button-like element for user-select: auto. r=#layout

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/df2bdd880266
https://hg.mozilla.org/integration/autoland/rev/22e4f438ffe2
Prevent text selection from originating inside a button-like element for user-select: auto. r=layout-reviewers,emilio

Comment 8

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/61141 for changes under testing/web-platform/tests

Comment 9

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/22e4f438ffe2

Comment 10

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot