Urgent! - AutoComplete Search Box Not Holding Query Value in Mobile Portrait View

Hi, I am using Autocomplete for searching events on a simple html support form. I just want to use plain javascript and jquery.

The autocomplete box was working well until I started x-browser testing. Choosing mobile device in chrome developer tools and selecting Pixel 2 or Iphone X for example, in portrait mode there is an issue where you select the event from the list but the search box does not hold the value selected. It works fine in landscape mode/mobile and desktop view.

Steps to replicate:

  1. Html and JS code here: https://codepen.io/dwolsey/pen/xxqmvZR
  2. You can change view to full screen and should be able to search for and select an event, and event description shows in the search box.
  3. Go to dev tools in your browser, change to mobile device in portrait mode.
  4. Try search for an event again, a list of options comes up but when you click on an option, the search box does not hold the value.
  5. Codepen is adding overhead, but this problem was happening on my local machine without any overhead and I can’t seem to find out the problem.

The main thing I have found when experimenting is if I remove this line:

        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1"
        />

It works, but of course it does not scale the web page for the mobile device and I need it in there. Please note that codepen puts this meta tag in their preview page by default.

Is this a bug in the autocomplete or am I doing something incorrectly?

Thanks for any help,

Darren.

I’ve finally found the issue. Autocomplete has a property “detachedMediaQuery”, which by default is turned on, however the documentation doesn’t say this and it doesn’t actually work properly.

Turning this off stops the autocomplete widget going to “detached mode” when viewing on mobile phone (portrait view) or when the screen width is small enough and instead just behaves the same as desktop mode which is what I wanted all along.

It’s disappointing that no responses were given to this from Algolia, even when I sent in a support ticket, no responses at all.

Hi there,

This is a known Autocomplete issue, which you can track on the repository. In the meantime, as you’ve already found out, you can deactivate Detached mode, as documented here.

Thanks Sarah, I’m glad that this is being fixed.