1616259 - Username field context menu is hard to toggle due to the placeholder on taobao login form

Status: RESOLVED WORKSFORME

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

Description

[Timea Cernea [:tbabos][inactive]]

Attachment: Recording of the issue

Affected platforms:
Windows 10 x64
MacOS 10.15

Affected builds:
All

Steps to reproduce:

1. Launch Firefox
2. Go to https://login.taobao.com/
3. Right-click on the username field where the placeholder is displayed

Expected:
The username field context menu should be displayed

Actual:
The site context menu is displayed

Regression-Range:
Not a regression, can be reproduced back to FX68

Note:
The context menu works if the user clicks anywhere in the field where the placeholder is not present. See attached screen recording.
This is also reproducible on sogou.com

Comment 1

[Matthew N. [:MattN]]

The site is positioning a span over the input and forwarding left click events to a input.focus() rather than using pointer-events: none like they should…

<span class="ph-label" data-spm-anchor-id="a2107.1.0.i0.3e9111d9Ua2aNd">会员名/邮箱</span>

Can we reach out and tell the site to make the following change:

/* new-loginV2.css | https://g.alicdn.com/vip/login/0.5.65/css/new-loginV2.css?t=20151220 */

.static-form .field .ph-label {
  pointer-events: none;
}

Comment 2

[Karl Dubost💡 :karlcow]

Matthew,
Thanks for the tip.
The additional questions would be:

1. if chrome receives the same markup/js/css why, does it work?
2. if it works in chrome, what do they do differently?

This can trigger a requirement we do things differently or that we file a bug against chromium and/or there is something to clarify in relevant specifications.

Comment 3

[Matthew N. [:MattN]]

(In reply to Karl Dubost💡 :karlcow from comment #2)

1. if chrome receives the same markup/js/css why, does it work?

The same issue appears in Chrome… right-clicking on the "placeholder" span leads to the wrong context menu. Compare to right-clicking to the right of the placeholder text.

2. if it works in chrome, what do they do differently?

It doesn't. See above.

Comment 4

[Karl Dubost💡 :karlcow]

Then not sure we can do anything about it. This is something which should be handled by TaoBao. :)
Why would it be a webcompat issue, if the issue is reproducible in all browsers.

Does it work in one known browser?

Comment 5

[Mike Taylor [:miketaylr]]

I agree with Karl, if it's broken everywhere it won't be a high priority.

Comment 6

[Matthew N. [:MattN]]

(In reply to Karl Dubost💡 :karlcow from comment #4)

Then not sure we can do anything about it. This is something which should be handled by TaoBao. :)

Exactly… that's why I moved the bug here… so we can tell them.

Why would it be a webcompat issue, if the issue is reproducible in all browsers.

Does it work in one known browser?

I don't know but that doesn't mean it's not a compatibility problem with the website. i.e. The website isn't compatible with browsers.

Comment 7

[Alin Ilea, Desktop QA]

This issue is also reproducible on zhanqi.tv, in Beta version 76.0b4 and latest Nightly 77.0a1 (2020-04-15). Updating the flags accordingly.

Comment 8

[Oana Arbuzov [:oanaarbuzov]]

I can't reproduce the issue on my side.

• right click shows the context menu: https://prnt.sc/10c67uu
• left click shows the saved logins menu: https://prnt.sc/10c672z

Tested with:
Browser / Version: Firefox Nightly 88.0a1 (2021-03-02)
Operating System: Windows 10 Pro

Timea can you still reproduce it?

Comment 9

[Timea Cernea [:tbabos][inactive]]

I can't reproduce it either on the latest Firefox Nightly 88.0a1 (2021-03-02) on MacOS 10.15. Thanks for looking into it and closing!