iOS issues with our Shopify autocomplete

On email support, this has been the second time a user of our Shopify integration has complained about issues for their users to click results from an iOS device. Other phones were working fine, trying in a browser resized to match a phone worked fine, but clicking didn’t work on iPhone.

autocomplete.js has been itself tested against iOS and is working fine.
Our autocomplete implementation on Shopify has been tested in a few themes and is working fine on iOS.
However, I could reproduce it on both of those live websites.

I’m not entirely sure what would cause the problem on iOS only. I didn’t find the root cause of the issue, my best guess stays on a combo of:

  1. Another script on the page which uses click event delegation that could go up to the autocomplete (so likely attached to the body)
  2. The weird way Apple chose to handle click event delegation

Anyway, there is a pretty simple fix: we can register on touchstart on top of click.
The way to do this is to look for this block of code in assets/algolia_autocomplete.js.liquid:

    autocomplete.$input.autocomplete({
      debug: autocomplete.debug,
      hint: false,
      appendTo: 'body',
      templates: {
        dropdownMenu: algolia.render(autocomplete.templates.dropdown, {
          storeName: autocomplete.storeName,
          with: {
            articles: autocomplete.articles.enabled,
            collections: autocomplete.collections.enabled,
            poweredBy: autocomplete.poweredBy,
            products: autocomplete.products.enabled
          }
        }),
        empty: autocomplete.templates.empty
      }
    }, _.compact([
      autocompleteSection('collections'),
      autocompleteSection('articles'),
      autocompleteSection('products')
    ]));

And add, just after this small block of code:

autocomplete.$input.each(function () {
  var data = $(this).data('aaAutocomplete');
  var dropdown = data.dropdown;
  var suggestionClass = '.' + dropdown.cssClasses.prefix + '-' + dropdown.cssClasses.suggestion;
  var onSuggestionClick = dropdown._onSuggestionClick.bind(dropdown);

  dropdown.$menu.on('touchstart.aa', suggestionClass, onSuggestionClick);
});

I haven’t added this to our integration at the moment because of the small amount of reports. If you, reader, also experience this issue, please make sure to let me know in this thread so that I can try to investigate further and know when to reconsider including it in the integration for everybody. :slight_smile:

2 Likes

There is now a fix deployed directly for this in our integration. If you haven’t modified our code, or if the only modification you did was the one described above, feel free to reinstall Algolia in your theme in:
Our Shopify app > Settings > Install in a new theme.

1 Like

I have installed Algolia on both my Magento site and Shopfiy but have this bug on my shopify site.
On IOS when I open the menu to search it displays the results but when I click the result it presses the menu button that is underneath. I have the latest version of the Algolia plugin and can confirm the slightly different code in the algolia_autocomplete.js.liquid:

// Hack to handle buggy onclick event on iOS
autocomplete.input.each(function () { var data = (this).data(‘aaAutocomplete’);
var dropdown = data.dropdown;
var suggestionClass = ‘.’ + dropdown.cssClasses.prefix + ‘-’ + dropdown.cssClasses.suggestion;
var onSuggestionClick = dropdown._onSuggestionClick.bind(dropdown);

  var touchmoved;
  dropdown.$menu.on('touchend', suggestionClass, function (e) {
      e.preventDefault();
      if(touchmoved != true){
        onSuggestionClick.apply(this, arguments);
      }
  }).on('touchmove', function (){
      touchmoved = true;
  }).on('touchstart', function(){
      touchmoved = false;
  });
});

The theme i am using is Supply and Algolia works flawlessly on all other devices just not IOS.

Thanks for highlighting this!
Indeed, I’ve worked on improving this hack since this was posted, and the code you’ve copy/pasted is supposed to fix the issue in more themes.
Since it seems like the issue isn’t fully resolved, I’ll update this thread again when we find what should be a final solution.