MaterializeCSS - Select native for IOS & Android

Question

Is it possible to make all select dropdowns native for IOS and Android ?

because currently the selection under IOS 13 with materializecss does not work properly.

Cordially

Answer 1

1. Use .browser-default

You can add the class browser-default to get the browser default.

https://materializecss.com/select.html

<select class="browser-default">
     <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>

2. There is a temporary workaround

Serving the below patched select.js file after materialize.js is working for most users.

https://github.com/Dogfalo/materialize/blob/v1-dev/js/select.js

Answer 2

Solution here

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

Answer 3

The issue is caused by the transform animation of the dropdown container.

I created a package that fixes this and other common known materialize-css issues materialize-css-helper. The fix in a package is similar to what @gepex suggested, but also adds passive listener option to not decrease scrolling performance.

Also you could try just removing animation from dropdown container:

.dropdown-content {
    transform: none !important;
}