javascript - Select element closes immediately when clicked in Chrome (Some Android devices)

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>
Copy code

I have tried everything and Googled everything I could for several days and can't find a solution. Any ideias?

Thanks for your help.

Didn't find the answer?

Our community is visited by hundreds of Shopify development professionals every day. Ask your question and get a quick answer for free.