Detached mode fails to initialize on iOS 13.6 and below

[deresatom]

Description

On iOS 13.6 and below the detachedMediaQuery fails to create an event listener and bugs out.

NOTE: If I set detachedMediaQuery: 'none' it works perfectly. I assume it can't read the --aa-detached-modal-media-query?

Solution might be to fall back (disable the detached mode) if the CSS variable can't be read.

Reproduction

Steps
0, have an iOS 13.6 device

1. Go to https://4keez.csb.app/
2. autocomplete crashes,

detachedMediaQuery.mp4

Expected behavior

It should initialize / fall back to disable it completely.

Environment

• OS: iOS 13.6 and below
• Browser: Chrome, Safari
• Autocomplete version: 1.1.0

While iOS 13.6 is not the latest version, but some still has this outdated update and unfortunately this bug ruins the search experience completely for them as the autocomplete crashes and fails to load.

[deresatom]

Update:
According to this table Compatibility table

Prior to Safari 14, MediaQueryList is based on EventTarget, so you must use addListener() and removeListener() to observe media query lists.

Autocomplete 1.1.0 however uses this:

autocomplete/packages/autocomplete-js/src/autocomplete.ts

Line 304 in 970ee6a

isModalDetachedMql.addEventListener('change', onChange);

Might need to check if addEventListener is supported, if not the deprecated addListener() and removeListener() should be used.

Thanks!

FIX -- I am sure you guys can come up with a more elegant way but this is how I solved it :

    try {
      isModalDetachedMql.addEventListener('change', onChange);
    } catch (e1) {
      try {
        // Safari fallback
        isModalDetachedMql.addListener('change', onChange);
      } catch (e2) {
      }
    }

[francoischalifour]

Thanks for the report. We indeed need to use addListener/removeListener to support these versions.

We'll include a fix in the next release, coming this week.