I have a page with a select option that automatically closes when clicked on some mobile devices (Chrome/Android). This problem does not occur on the desktop nor when I debug in chrome as mobile.
It’s a Shopify site, coded with the language "liquid", which basically is html.
After some days testing, I discovered thats the issue is happening because of some compatibilities problems with the Facebook Pixels code, and my page, thats refreshing and closes my select. After that I ve tryed some JS solutions to stop this event occurs like event.preventDefault(); and event.stopPropagation(), but not worked.
Here’s my code:
<div class="selector-wrapper js product-form__item">
<label for="SingleOptionSelector-{{ section.id }}-{{ forloop.index0 }}">{{ option.name }}</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input"
id="SingleOptionSelector-{{ forloop.index0 }}" data-name="{{ option.name }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}" {% if option.selected_value==value %} selected="selected" {% endif %}>{{ value
}}</option>
{% endfor %}
</select>
</div>
<script>
document.getElementById('SingleOptionSelector-0').onmouseup=function(e) {e.preventDefault();e.stopPropagation();};
</script>
I have tried everything and Googled everything I could for several days and can’t find a solution.
Any ideias?
Thanks for your help.
2
Answers
if it helps anyone:
in WordPress/woocommerce with WpRocket and PixelYourSite plugin:
in our case was same problem and solution was excluding public.js from Delay JavaScript execution: pixelyoursite-pro/dist/scripts/public.js
Hope it helps,
A
I ran into the same problem. I am unable to solve it but here is a test page to see the issue: (View the link in Chrome on an Android mobile device)
"link removed"