www.mcdonalds-mcdelivery.es - Autocomplete is not triggered

[emilio]

URL: https://www.mcdonalds-mcdelivery.es/mc-delivery/home

Browser / Version: Firefox Mobile 96.0 Operating System: Android 11 Tested Another Browser: Yes Edge

Problem type: Something else Description: address selection drop-down doesn't work. Steps to Reproduce: You need to write an address to continue but the autocomplete doesn't show up.

View the screenshot

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: false
• image.mem.shared: true
• buildID: 20211107095110
• channel: nightly
• hasTouchScreen: true
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-raul-bucata]

@emilio We appreciate your report. I was able to reproduce the issue. When tapping any letter from the keyboard into the address field, the autocomplete feature is not triggered:

Tested with: Browser / Version: Firefox Nightly 96.0a1 (2015845803 -🦎96.0a1-20211114093049🦎)/ Edge 95.0.1020.48 Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

Notes:

1. Reproducible regardless of the status of ETP
2. Reproducible on the latest build of Firefox Nightly
3. Works as expected using Edge:

Moving this to NeedsDiagnosis for further investigations.

[denschub]

This reproduces on Desktop. Looking at the Chrome, this dropdown is clearly provided by Google Maps. Checking the JS console in Firefox yells

ERROR ReferenceError: google is not defined

at me on page load, so this is most likely related. Looking at the source that's throwing this exception,

e = new google.maps.places.Autocomplete(this.element, {
  componentRestrictions: {
    country: 'es'
  }
});

So this makes sense. Unfortunately, when I check that object in Devtools after the page has been loaded,

it's there. The script is loaded directly in the HTML, but it's a <script async> tag. This looks like a timing issue. The Google API is called inside a function called ngOnInit, which is an Angular-native hook. The documentation say

A lifecycle hook that is called after Angular has initialized all data-bound properties of a directive. Define an ngOnInit() method to handle any additional initialization tasks.

and unfortunately, this doesn't help me understand when it actually fires - I don't know AngularJS.

There are three script tags loading Google Maps stuff in total. Two of which have an onload listener to it that does something in AngularJS. However, the one that's responsible for loading the API - https://maps.googleapis.com/maps/api/js?key=... doesn't have a handler attached. I also see no event handlers in Chrome, so this is probably something that slipped through.

Interestingly, it works fine in Chrome even if I throttle the network speed to something as slow as their "Slow 3G" option. I can get the site to break in Chrome as well if I use Charles Proxy to set a breakpoint on the maps API URL and don't let that go:

So this is definitely an issue on their end, it just appears like Chrome works fairly reliable in my other testcases where everything is throttled equally, but I can imagine a lot of real-world instances where that would not be the case.

Interestingly, the German version at https://mcdelivery.de/ doesn't have the same issue. However, this seems to be a completely different implementation, I don't see a similar script tag there, and the Maps API JS files are loaded via JS, with proper event handlers.

@emilio, given this is a site issue, do you mind attempting to reach out to their support folks and try to get them to look into this?

[webcompat-bot]

Generate outreach template

[emilio]

@denschub I contacted them, thanks.