1983538 - incontrol.landrover.com - Dropdowns are not working on page

Status: ASSIGNED

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

Description

[railioaie]

Environment:
Operating system: Windows 10
Firefox version: Firefox 141.0

Preconditions:
Clean profile

Steps to reproduce:

1. Navigate to: https://incontrol.landrover.com/jlr-portal-owner-web/select-locale
2. Click on : Select a market-> Select a language
3. Observe

Expected Behavior:
Dropdowns are working

Actual Behavior:
Dropdowns are not working

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in firefox-nightly, and firefox-release
• Does not reproduce in chrome

Created from https://github.com/webcompat/web-bugs/issues/172106

Comment 1

[railioaie]

Attachment: firefox

Comment 2

[Sky Schubert [:skyschub]]

<a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">

so I'm honestly not even sure why it works in Chrome.

Comment 3

[Keith Cirkel [:keithamus]]

Their select2 implementation is reliant on DOM Mutation Events. Enabling dom.mutation_events.enabled makes this website functional again.

Steps to reproduce:

1. Visit about:config
2. Search for dom.mutation_events.enabled and ensure it is enabled (true)
3. Navigate to: https://incontrol.landrover.com/jlr-portal-owner-web/select-locale
4. Click on : Select a market, then Select a language
5. Observe site is functioning correctly.

Comment 4

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

Does the site work in Safari?

Does it help to add string pref dom.mutation_events.forceEnable and add incontrol.landrover.com to it?
(Or should it be https://incontrol.landrover.com, or *.landrover.com)

Comment 5

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

dom.mutation_events.forceEnable="*.landrover.com" seems to help locally

Comment 6

[Keith Cirkel [:keithamus]]

Adding the value of incontrol.landrover.com to dom.mutation_events.forceEnable suffices in making the site usable again.

Safari works because WebKitMutationObserver exists, and the website has a check for this. The relevant code:

           // mozilla and IE
            el.on("propertychange.select2 DOMAttrModified.select2", sync);


            // hold onto a reference of the callback to work around a chromium bug
            if (this.mutationCallback === undefined) {
                this.mutationCallback = function (mutations) {
                    mutations.forEach(sync);
                }
            }

            // safari and chrome
            if (typeof WebKitMutationObserver !== "undefined") {
                if (this.propertyObserver) { delete this.propertyObserver; this.propertyObserver = null; }
                this.propertyObserver = new WebKitMutationObserver(this.mutationCallback);
                this.propertyObserver.observe(el.get(0), { attributes:true, subtree:false });
            }

I think the code could be patched to use MutationObserver proper, so the above block of code could simply be:

            if (this.mutationCallback === undefined) {
                this.mutationCallback = function (mutations) {
                    mutations.forEach(sync);
                }
            }

            let MO = window.MutationObserver || window.WebKitMutationObserver;

            // safari and chrome
            if (this.propertyObserver) { delete this.propertyObserver; this.propertyObserver = null; }
            this.propertyObserver = new WebKitMutationObserver(this.mutationCallback);
            this.propertyObserver.observe(el.get(0), { attributes:true, subtree:false });

Alternatively we could add an intervention for this site, which I have confirmed works:

window.WebkitMutationObserver = MutationObserver

Comment 7

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

Wow...

Looks like Window.WebkitMutationObserver is just an alias of MutationObserver.
https://searchfox.org/wubkat/source/__GENERATED__/WebCore/DerivedSources/DOMWindowConstructors.idl#451

    attribute MutationObserverConstructor MutationObserver;
    attribute MutationObserverConstructor WebKitMutationObserver; // Legacy Window alias.

So, adding the alias might be better? I'm not sure.

Comment 8

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

Try: https://treeherder.mozilla.org/jobs?repo=try&revision=c5680f2955834a6dfe6ecbb902c163430aae2cbb

Comment 9

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

Attachment: Bug 1983538 - Add `WebKitMutationObserver` as an alias of `MutationObserver` r=smaug!,#dom-core

The reported website detects MutationObserver with the alias.
Therefore, it's required to make the website work on Firefox.

Comment 10

[Thomas Wisniewski [:twisniewski][on PTO until July 6]]

Attachment: Bug 1983538 - add a webcompat JS intervention for incontrol.landrover.com to un-break their locale selector's dropdowns; r?denschub

Comment 11

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/6b2d322db1e1
https://hg.mozilla.org/integration/autoland/rev/2029551f0c1f
add a webcompat JS intervention for incontrol.landrover.com to un-break their locale selector's dropdowns; r=denschub,webcompat-reviewers

Comment 12

[Sandor Molnar[:smolnar]]

https://hg.mozilla.org/mozilla-central/rev/2029551f0c1f