1763744 - text inside button can't be selected by "Select All"

Status: NEW

(Core :: DOM: Selection, defect)

Description

[Karl Dubost💡 :karlcow]

Attachment: testcase

Maybe this is normal by design, but there is a difference in behavior with Blink and WebKit.

• TODO: check the spec.

This was initially reported on https://github.com/webcompat/web-bugs/issues/102132
But this is not specific to any sites in particular as it is happening everywhere. This is a difference of behavior. I didn't find a previous CLOSED bug for this. I was slightly surprised. It doesn't break the site, just change the user expectation with regards to copy and paste. as shown in the webcompat bug.

Steps to reproduce

1. Open the testcase
2. Select All

Note:

• On Blink and WebKit, the text outside and inside the button is selected.
• On Gecko, only the text outside the button is selected.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

Buttons have user-select: none. It seems to come from bug 38506.

Comment 2

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

If user-select is specified, the result of <button> is same between Gecko and Blink.
https://jsfiddle.net/d_toybox/95wjyLp3/

Comment 3

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

<span style="user-select:none">
  <span style="user-select:text">
    text
  </span>
</span>

This code makes the "text" is always selectable, not only by "Select All", so if we need to fix this bug, we need tricky code for <button> element.

Comment 4

[Karl Dubost💡 :karlcow]

Two bugs have been recently opened on WebKit and Blink
https://bugs.webkit.org/show_bug.cgi?id=244448
https://bugs.chromium.org/p/chromium/issues/detail?id=1356522

I wonder if a spec issue would be a better place to resolve this.

Comment 5

[Karl Dubost💡 :karlcow]

I filed https://github.com/whatwg/html/issues/8228

Comment 6

[Olli Pettay [:smaug][[e-mail]]]

What is the tricky part here? We have https://searchfox.org/mozilla-central/rev/380fc5571b039fd453b45bbb64ed13146fe9b066/layout/style/res/forms.css#509
Don't we get similar behavior to blink if we just remove that?

(But I'm not sure we want to get the same behavior as in blink)

Comment 7

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

(In reply to Olli Pettay [:smaug][[e-mail]] from comment #6)

What is the tricky part here? We have https://searchfox.org/mozilla-central/rev/380fc5571b039fd453b45bbb64ed13146fe9b066/layout/style/res/forms.css#509
Don't we get similar behavior to blink if we just remove that?

Once we make <button> has user-select: text (data:text/html,<button style="user-select:text">abc</button>), user can select text with both dragging in the button and "select all". However, Chrome allows only "select all" case, i.e., not allowing users to select button's text with dragging in the text. As far as I know, we don't have the code.

Therefore, I think that we need special handling around here and make <button> keep having user-select: none.

Comment 8

[Olli Pettay [:smaug][[e-mail]]]

But in Chrome one can select the text by starting to drag outside the button. It seems that they just consume the mousedown or such event when it occurs on a button element and thus selection doesn't start.

Comment 9

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

Oh, good point. That sounds what Chrome does. (But I'm also not sure whether we should follow it.)

Comment 10

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

The example above https://drafts.csswg.org/css-ui/#issue-5d851d49 defines as:

The following additions are made to the UA stylesheet for HTML:
button, meter, progress, select { user-select: none; }
ISSUE 4: the list above is incomplete and needs to include at least the various button-like variants of input.

Comment 11

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

The severity field for this bug is relatively low, S3. However, the bug has 6 See Also bugs.
:peterv, could you consider increasing the bug severity?

For more information, please visit auto_nag documentation.