Materialize select and dropdown: Touch event selecting wrong item

Question

This bug occurs not just in my code, but also on the Materialize documentation site, so I will use their code as an example:

        
                      

              相关标签:
       
      

Answer 1

After hours of trying, I found the answer: Stop propagation on touchend event, specifically

  $('li[id^="select-options"]').on('touchend', function (e) {
     e.stopPropagation();
  }); 

Thanks for your attention and have a nice day.

Answer 2

You should add the "browser-default" class to the select elements.

Of course this will loose the usual materializecss look and feed on that select element Also on other devices.

A possible workaround would be to add that class selectively only when the user browser is safari.

Answer 3

Yes, JRSeabird, it works but It only solved the problem on DOMContentLoaded. If you want it to capture every event, try this

$(document).click(function(){
    $('li[id^="select-options"]').on('touchend', function (e) {
        e.stopPropagation();
    });
});