Search Broken On Mobile When Autocomplete Enabled

Paul_Castle1
New Member
6 0 0

I would appreciate some help or advice please. Theme is Turbo from Out of the Sandbox. When autocomplete is enabled Search works perfectly on desktop but is broken on mobile. On mobile the search box accepts entry but capitalizes it and there is no search action. 

When autocomplete is not enabled, search functions as expected on both desktop and mobile.

The only theme change recently was installing Google Tag Manager. I've tested earlier versions of the theme and the problem was there before GTM.

I'm guessing that this must be a theme problem rather than a Shopify problem or other people would have flagged it.

Thank you in advance for any suggestions.

In case it helps, the bit of code that might be at the root of this is search-form.liquid...

{% if type == 'block' %}
{%- assign search_term = block.settings.search_term -%}
{% else %}
{%- assign search_term = section.settings.search_term -%}
{% endif %}

<div class="search__container" data-autocomplete-{{ settings.enable_autocomplete }}>
<form class="search search__form" action="{{ routes.search_url }}">
<div class="search__wrapper">
{% if settings.search_option != 'everything' %}
<input type="hidden" name="type" value="product" />
{% endif %}

<input type="text" name="q" placeholder="{{ search_term }}" value="{{ search.terms | replace: '*', ''}}" x-webkit-speech autocapitalize="off" autocomplete="off" autocorrect="off" />

<button type="submit" name="submit" class="search__button" value="">
<span class="icon-search"></span>
</button>
</div>
</form>

0 Likes

Hello,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes
Paul_Castle1
New Member
6 0 0

Hi Diego

We are wyldhome.com. The problem is with the search box on every page (part of the common head section).\

You won't be able to replicate the problem because at the moment autocomplete is not enabled.

Many thanks... Paul

0 Likes

@Paul_Castle1 

Please make a copy of your theme, activate the autocomplete function on this unpublished copy and share the link with us. We are unable to assist without checking the issue.

Here is a quick tutorial about how to share an unpublished theme with your developer without disrupting the live website.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response: ezfycode@gmail.com.
0 Likes