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:

<div class="input-field col s12">
<select>
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<label>Materialize Select</label>

This works fine with mouse events. But on my android mobile phone screen, it is impossible to select the option I want. I either get another option or none. The feature is initialized as instructed, with

$(document).ready(function(){
$('select').formSelect();

});

You can find the example in the Materialize documentation at https://materializecss.com/select.html and confirm that it does not work. The same occurs on dropdowns, as can be seen at https://materializecss.com/dropdown.html.

I see that materialize renders the select block shown above, but the materialize js function generates an additional div with class "select-wrapper" containing a ul, which then functions as the actual dropdown. The select block itself seems to serve no function. Could it be that the ul element is opaque to mouse events, but not to the emulated mouse events on touch screens, and that this is causing the problem? But this train of thought led me to no solution.

I also followed the suggestion to add <meta name="viewport" content="width=device-width"> , but this does not help.

How can I get this to work? Any help will be appreciated!

score 5 · Answer 1 · answered Oct 17 '18 at 09:02

5

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.

answered Oct 17 '18 at 09:02

JRSeabird

343
4
13

Bit of a workaround, but I confirm it works. Thanks for that solution! – tpaczesny Nov 08 '19 at 03:21

Akintomiwa Opemipo · Answer 2 · 2020-03-22T18:06:05.670

5

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();
    });
});

edited Mar 22 '20 at 18:06

answered Mar 22 '20 at 17:57

Akintomiwa Opemipo

131
4
5

great solution! thank you both JRSeabird and your solution are actually better than the patch version of select.js! – gepex Aug 29 '20 at 06:52

score 0 · Answer 3 · answered Oct 28 '20 at 15:16

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.

Materialize select and dropdown: Touch event selecting wrong item

3 Answers3

Linked