Algolia netlify frontend problem on responsive

Hi all, I am having some problems with the algolia netlify frontend library. Have a look at parentutor.co.uk with a small screen. When clicking on the search bar to type the query it scroll to the bottom and the aa-TouchOverlay shows right there instead of showing under the search box.

Any idea ?

Thanks

Hi,

If I understand correctly, what you’re experiencing on a small screen is, when clicking in the search input at parentutor.co.uk, there is a scroll to the bottom of the page and the search overlay appears here ? Is this correct ?
I’ve tried to reproduce this on chrome (desktop & mobile) and firefox without success.

Could you provide more detail or correct me if I’m wrong ?

Emmanuel

Hi Emmanuel, thanks for getting back to me. I recorded a video to explain what is happening. screen-capture-algolia.webm - Google Drive

I can reproduce on chrome with the mobile (responsive) view under developer tools.

Please let me know this is affecting our customers, I am considering rollbacking back this change

Hi!

It looks like your there’s two different versions of your search.

When the issue is appearing, it looks like (and it is) a button:
image

When it’s working properly, it looke like (and it is) a search box:
image

It looks like algoliasearchNetlify.js is loaded in both cases, so you might want to look at what in your code is putting that search button instead of the search input.

Hi Emmanuel,
I have noticed that indeed. There is no difference in my code between mobile and desktop though. It must be in algoliaNetlify then ?

The button does not come from algoliaNetlify, that’s what you want to have a look at :wink:

I am pretty sure it is. All I have is a div that I pass to algoliaNetlify when I initialise the object.

<div id="search"></div>

You’re right, sorry for my mistake.
I’m getting in touch with colleagues to have more information.
I’ll update you.

Hi @mericano1, thanks for reporting the issue!
We have identified the problem: The autocomplete.js team (the Algolia lib used in the packaged UI) has recently added Touch support (algolia/autocomplete.js#379), and we had missed the fact that we had to update the default CSS when we’ve updated the library.

You can expect the fix to be pushed early next week (I’ll reply here), sorry for that!

Brilliant, thanks for the update

Hi again! Version 1.0.4 which fixes the issue and adds support for touch devices has been released. Let us know if you have any feedback! :slightly_smiling_face:

Thanks for letting me know Sylvain. I am currently using this CDN link

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@algolia/algoliasearch-netlify-frontend@1/dist/algoliasearchNetlify.js" Do I need any code changes ? Thanks

jsdelivr will automatically target the latest version matching the 1 major.
1.0.4 belongs to that major, so you’ll be good to go.

You might need to clean your cache for this to take effect in your browser if you had an old version in your browser cache. (I believe that jsdelivr assets are cached for 7 days)

1 Like