1566650 - Interop issues with where focus and cursor are placed when clicking ::after content in contenteditable elements.

Status: NEW

(Core :: DOM: Selection, defect, P2)

Description

[Thomas Wisniewski [:twisniewski]]

Attachment: testcase.html

As seen in the attached test-case, ::after content behaves differently in Blink and Gecko when the user clicks/taps on it.

Firefox seems to insert the cursor at the beginning of the contenteditable div, and if pointer-events are disabled, then it places to the left of the placeholder.

Chrome places to the left of the placeholder, unless there is no whitespace after the closing tag of the textarea, at which point is focuses on the textarea instead.

That "focuses on the textarea" difference of behavior is causing an interop issue on at least the site telegra.ph, as reported at https://webcompat.com/issues/35431, where users cannot click/tap to edit caption text in Firefox, since it's not focusing on the textarea as the site's code expects.

I'm not sure if that's a bug in Blink, but it does seem as though Firefox may be mis-placing the cursor when pointer events are active on the ::after content, regardless of whether the textarea should ever be focused or not when tapping on the placeholder text.

Comment 1

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

masayuki, makoto, you may have some opinion on this.

Comment 2

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

I guess that the caret position is decided by nsFrameSelection with nsIFrame::PeekOffset().

But there is another issue. Whether moving focus into <textarea> is reasonable in this case. The ::after pseudo element is outside <textarea> element. Therefore, I feel that putting caret immediately left of the pseudo element is more reasonable than setting focus to the last <textarea>.

Comment 3

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

The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

Comment 4

[Kagami Rosylight [:saschanaz] (they/them)]

I feel that putting caret immediately left of the pseudo element is more reasonable than setting focus to the last <textarea>.

Actually right-clicking the first pseudo element twice exactly does that. So the work item here probably is to make the same happen with a single click.