Materialize: Mobile select not working correctly on new iOS

[pwcreative]

Expected Behaviour

The tapped option should select.

Current Behaviour

The tapped option is not selected. The option before or after is being selected.

Steps to Reproduce (for bugs)

Visit https://materializecss.com/select.html on mobile and try the first example.

Context

This issue has been brought up several times in the Gitter feed, and I've noticed it on my own sites. Obviously a user not being able to select their intended option has pretty huge ramifications for UX.

Your Environment

iPhone Xr
iOS 13.1

Evidence

You can see from the video that the selected option flashed grey first, and the the incorrect option is displayed.

https://youtu.be/8Udc8R6yqwU

[Maverick0809]

https://github.com/Dogfalo/materialize/commit/c0da34049deec36efbd4681f73b3446e92918ca8 fixes this Select function, but NOT the Navbar dropdown-content options on iOS 13.1.2

Any ideas?

[assistcontrol]

I think what we're seeing here is the standard Materialize pattern:

Users: [submit over 500 bug reports]
@Dogfalo: Patreon update
Users: Materialize no longer works on iOS
@Dogfalo: Patreon update

It's really disappointing.

[pwcreative]

@assistcontrol
It would be nice to get quicker resolution but personally I just find workarounds in the meantime.

[JimboM4CK]

@pwcreative Have you found a workaround for this issue?

[doughballs]

@JimboM4CK

Materialize comes with it's own workaround built in:

adding

.browser-default

to any materialize form input does exactly what you'd expect it to.

[JimboM4CK]

Thank you @doughballs for the very helpful workaround of suggesting not to use materialize select at all. /s

An alternate approach I've found to work was to include the patched select.js file after including the materialize.js file.

The patched select.js can be found here: select.js

[doughballs]

@JimboM4CK

You’re so right - pointing out how to keep a select functioning using a single class name from the published documentation is so unhelpful, I don’t know that I was thinking 🤦🏻‍♂️

[kiere]

I think the writing is on the wall, unfortunately. I keep coming back to this framework only to be let down again-and-again. This iOS 13 bug is a MAJOR problem and the maintainers should have made fixing a bug that affects such a huge user base a priority. Factor this in with the open CVEs that they don't want to address and I've come to the conclusion it's time to move off Materialize and onto something that's more likely to keep being maintained.

I think it's healthy for maintainers to take a break, but it's also critical to fix security issues and bugs when they arise. Committing to something and sticking with it for all those people that depend on it for their applications is a big deal. Dropping off the grid and barely responding to issues like the iOS 13 dropdown/select issue is a deal-breaker for me. It's embarrassing our company and it makes it look like we aren't addressing bugs. This issue is affecting every iOS mobile device that's been updated and I have to do something yesterday.

With traction like Materialize has, the maintainers should have brought on some additional maintainers _before_ taking a break. This would allow maintenance to continue until they were ready to come back.

[pwcreative]

@kiere while I half agree with you (and feel your pain), I do feel like problem solving is our job and in the absence of a new release (for all the reasons that may be behind that) there are fixes above that work - enqueuing the patched select.js after materialise.js as suggested by @JimboM4CK fixes the issue. Everybody has different needs - for me, despite these drawbacks Materialize is still my go to and will be for the foreseeable.

Marking as fixed thanks to @JimboM4CK

[Maverick0809]

@pwcreative , like said before, enqueuing the patched select.js after materialise.js does fix the select issue but NOT the navbar dropdown issue.

[pwcreative]

@Maverick0809 my issue was specifically about select inputs on mobile, as per the the title, and so has been correctly closed. The dev's are aware of it and it has been fixed in a patch. Although I realise you deserve thanks for alerting initially!

Although select.js uses dropdown.js, they are independent of each other so it is no surprise that this patch does not fix the issue with dropdown.js.

[kiere]

@pwcreative My project uses webpack and I have not been able to get this patch working that way. Are you using webpack or something like it?

[pwcreative]

@kiere no sorry, I don't use Webpack. We use Wordprsss and the way I got it to work was by enqueuing materialize.js, then enqueuing select.js, then enqueuing my custom.js. So serving 3 separate JS files.

What I haven't tried yet is adding the patched select as it's own component at the time of compiling my materialize.js using grunt - I did try replacing select.js with the patched version, but this did not work! So adding it as it's own component (select2.js) could technically work...

[lKapaM6a]

This is all due to the animation, I just prescribed .dropdown-content one style transform: none; and everything worked on ios, although the animation will stop working;)

[lkusam]

Thank you @doughballs for the very helpful workaround of suggesting not to use materialize select at all. /s

An alternate approach I've found to work was to include the patched select.js file after including the materialize.js file.

The patched select.js can be found here: select.js

Thank you. it worked

[Siddharth-Ashri]

Thank you @doughballs for the very helpful workaround of suggesting not to use materialize select at all. /s
An alternate approach I've found to work was to include the patched select.js file after including the materialize.js file.
The patched select.js can be found here: select.js

Thank you. it worked

How exactly did you do that? Did you include the file in the materialize-css folder in node_modules?

[lkusam]

@Siddharth-Ashri I put the select file in my project folder and added script tag to the file after i load material.js in html page.

You place the select file anywhere you want and reference it properly. Remember to load this after you loaded the material.js

[paysnugtech]

it will be good if they can solve this issue faster

[fede-moya]

For those who couldn't get the patch working by adding the new select.js into your projects, another alternative is to create a build from the main dev branch. I cloned the project, checkout to v1-dev and I managed to create a fresh build using yarn and grunt. As done in the CI. Then I just replaced the materialize.min.js with the one manually created 👍🏼