1913960 - tiktok.com - Can't comment on live stream

Status: VERIFIED FIXED

(Web Compatibility :: Site Reports, defect, P1)

Description

[railioaie]

Environment:
Operating system: Windows 11
Firefox version: Firefox 129.0.1 (release)

Preconditions:

• Clean profile

Steps to reproduce:

1. Navigate to: https://www.tiktok.com/@rhobertta_azenberss/live?enter_from_merge=others_homepage&enter_method=others_photo
2. Click on a live stream
3. Write a comment

Expected Behavior:
The comment Is written as expected

Actual Behavior:
Unable to comment

Notes:

• Reproducible on the latest Firefox Release and Nightly
• Reproducible regardless of the ETP setting
• Works as expected using Chrome

---

Created from webcompat-user-report:a647ef5b-3aab-4e3b-87aa-5d30fb20870d

Comment 1

[Dennis Schubert [:denschub]]

Ksenia, can you check if this is related to the other TikTok issue, and if we have a contact?

Comment 2

[Ksenia Berezina [:ksenia]]

Attachment: Screen Shot 2024-09-20 at 11.53.15 AM.png

I picked a random Live stream on https://www.tiktok.com/live and after logging in in Firefox, can't seem to focus or type in the comment field (The one with "Say something nice" placeholder). It allows to pick an emoji though and can only send that. I can focus in the field in Chrome and send a text comment.

Hi Radu, wonder if you're experiencing the same behaviour?

Comment 3

[Ksenia Berezina [:ksenia]]

They are using contenteditable="plaintext-only" for the field:

<div contenteditable="plaintext-only" maxlength="150" placeholder="Say something nice" class="css-1kvtqrg-DivEditor e1ciaho81"></div>

I can comment if I remove the attribute. So this depends on bug1291467 (provided that the STR in comment 1 is about this specific field).

Comment 4

[railioaie]

HI Ksenia, Yes I have the same behaviour for this issue as you described.

Comment 5

[Ksenia Berezina [:ksenia]]

Thanks for checking!

Comment 6

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

Could you check whether white-space style of the editable text node parent is pre-* or not?

If pre-*, we may need to fix bug 1921180 for supporting this. If normal, it might require a hack. Chrome forcibly compute the value to pre-wrap or pre.

Comment 7

[Ksenia Berezina [:ksenia]]

(In reply to Masayuki Nakano [:masayuki] (he/him)(JST, +0900) from comment #6)

Could you check whether white-space style of the editable text node parent is pre-* or not?

If pre-*, we may need to fix bug 1921180 for supporting this. If normal, it might require a hack. Chrome forcibly compute the value to pre-wrap or pre.

I've just checked, the parent doesn't have any white-space styling set, so I think it's normal in this case?

Comment 8

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

Thank you. Then, if it's aware of Safari, <br> elements must be handled.

Comment 9

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

Next nightly build starts to support basic features of contenteditable=plaintext-only if you enable dom.element.contenteditable.plaintext-only.enabled from about:config (it needs to be enabled before loading the page) because bug 1921162 will support inserting line break instead of paragraph. So, I'd be happy if somebody would check whether it works in nightly builds especially about typing multi-line comment if it's available.

Comment 10

[Ksenia Berezina [:ksenia]]

I've tried leaving a comment with dom.element.contenteditable.plaintext-only.enabled set to true and it works as expected for single line.

For multi-line, I don't think the site allows it for this specific field. When I type the first row and try to move to the next line with Shift+Return (on MacOS), the message just get submitted (same with just hitting Return). Also when copying over multi-line text, it appears as multi-line in the field, but on submission it becomes one line.

So something like:

hi
looks cool!

After submission becomes:
hilooks cool (in Firefox)
hi looks cool (in Chrome)
Interestingly, if I reload the page in Chrome, the message appears as hilooks cool in the chat, so it starts matching Firefox.

Despite this difference, overall, it looks like the field is designed to be used for single line messages.

Comment 11

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

Thank you for the test! Then, we need to fix bug 1921180 before the final shipping because Element.textContent does not convert <br> s to \n. On the other hand, according to comment 7, they don't specify white-space:pre-* to make \ns preformatted. However, according to 10, they expect \ns even though they don't make them preformatted. Therefore, their code depends on the hack for Chrome which overrides white-space style. So, it seems that we need some interventions for tiktok.com anyway.

Comment 12

[Randell Jesup [:jesup] (needinfo me)]

Appears fixed, probably by bug 1921180

Comment 13

[Raul Bucata]

Verified as FIXED using the RC Build

Tested with:

Browser / Version: Firefox 137.0-candidate build 1
Operating System: Windows 10 PRO x64

Comment 14

[Raul Bucata]

Attachment: RC build fixed