porsche.com initial menu is not working



Tech Evangelism
3 years ago
2 years ago


(Reporter: karlcow, Assigned: karlcow)


Firefox Tracking Flags

(Not tracked)


(Whiteboard: [country-all] [js] [sitewait], URL)


(1 attachment)



3 years ago
+++ This bug was initially created as a clone of Bug #717516 +++

1. Go to http://porsche.com/ with Firefox Android UA.
2. There is a menu for selecting the region and the country.
3. With Firefox Desktop UA or Firefox OS UA, the input menu are working.
   With Firefox Android, the input menu are not reacting at all.


3 years ago
Whiteboard: [serversniff] [sitewait] [css] [country-us] → [country-us] [js]

Comment 1

3 years ago
With Firefox Android UA on Blink, the menu is working. 
I suspect something related to a WebKit JS.
Not promising:

SyntaxError: expected expression, got end of script

However, that seems irrelevant. Here's some code that does run but doesn't seem to do what they expect:

function openSelect(n) {
  window.setTimeout(function () {
    if (document.createEvent) {
      var t = document.createEvent('MouseEvents');
      t.initMouseEvent('mousedown', !0, !0, window, 0, 0, 0, 0, 0, !1, !1, !1, !1, 0, null),
    } else element.fireEvent ? n.fireEvent('onmousedown')  : typeof node.onclick == 'function' && node.onclick();
  }, 0)

So there's an expectation that sending a synthetic mousedown event to a SELECT element when the user clicks a DIV will focus and open the SELECT. Gecko doesn't do that.
Created attachment 8585399 [details]
1149020.htm - TC
Component: Mobile → Event Handling
Priority: P4 → P3
Product: Tech Evangelism → Core
Summary: porsche.com initial menu is not working → synthetic mousedown event must open SELECT - porsche.com initial menu is not working
Maybe Masayuki or Boris know if this is a known issue?

Comment 5

3 years ago
Sending synthetic event should *not* open the select. Blink and webkit have (had?) lots of issues with this stuff.

How does IE behave with the page?

Rick, are these issues being fixed in blink?
TC fails in IE11 (page sends different markup)
This is quite interesting.. there is actually a LABEL element in the code. So you might expect clicking here to open the SELECT which is also a child of LABEL. Perhaps the reason it doesn't happen without the JS is that the JS cancels the click event?

<div class="gui-drop-down-dark-gradient m-15-select"><label class="gui-drop-down-label sel-dd-continent"><div class="gui-drop-down-click-handler" style="position: absolute; top: 0px; left: 0; right: 0; bottom: 0; z-index: 100;"></div><select data-placeholder="Select a Region"><option disabled="">Select a Region</option><option value="c1">North America</option><option value="c2">Latin America</option><option value="c3">Europe</option><option value="c4">Middle East</option><option value="c5">Africa</option><option value="c6">Asia</option><option value="c7">Australia/Oceania</option></select><svg version="1.1" class="gui-drop-down-bg" xmlns="http://www.w3.org/2000/svg"></svg><svg version="1.1" class="gui-drop-down-arrow" xmlns="http://www.w3.org/2000/svg"></svg></label></div>
Apparently there's implementor consensus that LABEL should focus SELECT but not open it. Is there no "kosher" way to make the SELECT open from JS?
Flags: needinfo?(bugs)

Comment 9

3 years ago
js should not be able to open <select>.
Flags: needinfo?(bugs)
(In reply to Olli Pettay [:smaug] from comment #9)
> js should not be able to open <select>.

I agree. I wonder why somebody thinks that it's reasonable. It could cause some security issues. (e.g., cannot close dropdown forever)

Comment 11

3 years ago
Fun timing, we're in the process of breaking this exact scenario in blink right now (see http://crbug.com/423975) to improve interop.  If breakage like this is relatively isolated then we should be able to ship anyway.
No problem, we'll move this back to Tech Evangelism / contactready.. Great to see it's being fixed in Blink. With some collaborative outreach we can probably help you avoid some of the compat pain :)
Component: Event Handling → Desktop
Product: Core → Tech Evangelism
Whiteboard: [country-us] [js] → [country-us] [js] [contactready]
(The thing that's sort of neat about their solution is that it presumably has some A11y benefits to use a real SELECT element? Not sure I agree in principle that "js should not be able to open SELECT" but it's been discussed in the right circles and a standardisation decision has been made so let's move on.)

Karl, can you find a contact point?

Comment 14

3 years ago
ok let's try again :)
Thanks everyone for the analysis. Really interesting.

They seem to be using:
> Notable references in the area of Web content management and Web publishing such as www.porsche.com and www.test.de (Stiftung Warentest, Berlin) prove what we understand by "State of the Art" Web sites.

Trying a human contact with someone working at Noxum.
Assignee: nobody → kdubost
Summary: synthetic mousedown event must open SELECT - porsche.com initial menu is not working → porsche.com initial menu is not working
Whiteboard: [country-us] [js] [contactready] → [country-all] [js] [sitewait]

Comment 15

3 years ago
we are thankful for pointing this out. I have forwarded your input to the frontend-team in charge.

Comment 16

3 years ago
Thanks a lot Johnson. Let us know if you need further help.

Comment 17

2 years ago
This has been fixed.
Last Resolved: 2 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.