Search input behaviour on mobile/tablet devices

Hi there

I don’t know if this is an issue specifically related to algolia/instant search but I thought I would ask in case anyone else has experienced this.

I have my instant search working on mobile & tablets, however I have an issue related to the little keyboard that pops up on mobile and tablet devices. And the issue is once I have typed into the search input what I want to search for, I then proceed to click the search button on the keyboard and the keyboard stays open. and I can’t close it without clicking the back button. Obviously in other search scenarios it would redirect me to another page with the data I had searched for but of course with this it’s done instantly. I basically would like it to have the behaviour of when i click the search button it just closes the keyboard which I know is possible but not sure how.

This is my code for the search input:

Thanks

Hi @dbarkerinbox, could you provide us a live example that we can experiment and try? Thanks!

Hi @vvo

Well the site I am building is not live yet but, the algolia preview site has the same behavior as what I was getting on my site (https://preview.algolia.com/instantsearch/). Obviously this is not optimized for mobile but when you tap on the search box it’s giving the same behavior as my site on my android phone. (tap on search input, keyboard comes up click the go or search icon on the keyboard and it doesn’t minimize).

Here is an image of what I mean. So when i click the go button here I would like the keyboard to disappear but it doesn’t I would have to click the back button.

Hi @dbarkerinbox, can you try the solution here: https://github.com/algolia/instantsearch.js/pull/1450#issuecomment-259118772

Let me know how it goes!

2 Likes

Yes!!!

This works, thank you so much! i never would have figured this out myself! Would be cool if this could be added by default if possible I guess.

Thanks again