Dropdown issue: Touch event selecting wrong item

[chipcop106]

I have a problem when selecting options on the mobile, tablet version with Materializecss.

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

Video link : https://streamable.com/dhgog

Version : Materialize v1.0.0 rc-2

Example : I select option : 155 cm the frameworks select 157 cm

GIF : https://i.stack.imgur.com/Jxp7p.gif

[henrywhitaker3]

I’m also experiencing this, even on the materialize website (so I know it’s not that I’ve implemented it wrong). Here’s a screen recording where I’m trying to select “Option 2” each time.

This only seems to happen on iOS devices, android works fine for me

[truelogicapp]

I’m also experiencing this, This seems to happen on both iOS devices, android for me.

kindly send the solution ASAP

[RaquelAM]

Hi! I would like to work on this if it is not taken

[truelogicapp]

Yes please @RaquelAM it’s urgent

[RaquelAM]

I was searching if there are no other issues related to this and I found this #6449 It seems that there is already a PR related to this, but they haven't release it. Also on that issue they mention two possible solutions at the moment, I don't know if that can help you

[truelogicapp]

Thanks @RaquelAM let me try this and will update you shortly

[truelogicapp]

https://github.com/Dogfalo/materialize/commit/c0da34049deec36efbd4681f73b3446e92918ca8

this fixed the issue. thanks for your kind support @RaquelAM

[RaquelAM]

@truelogicapp Great! You are welcome :)

[davidus05]

https://github.com/Dogfalo/materialize/commit/c0da34049deec36efbd4681f73b3446e92918ca8 worked for me, too! Please include this into release.

[chipcop106]

i had imported c0da340 from select.js . But it's not working for me. I inserted the select.js file, but it still doesn't seem to fix the problem. Dropdown has the same error. I cannot select the correct item on mobile.

https://streamable.com/q2y3o

[pwcreative]

@chipcop106

Serving this patched select.js after serving materialize.js fixed it for me:

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

 <script src="/js/materialize.min.js"></script>
 <script src="/js/select.js"></script>
 <script src="/js/yourcustom.js"></script>

[krzSobin]

@pwcreative should I keep this code in my custom.js $('select').formSelect();? It was the code that initialized select

[pwcreative]

@krzSobin

Absolutely. That line initialises the select. All initialisations should go in your custom.js.

[chipcop106]

@chipcop106

Serving this patched select.js after serving materialize.js fixed it for me:

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

 <script src="/js/materialize.min.js"></script>
 <script src="/js/select.js"></script>
 <script src="/js/yourcustom.js"></script>

I have followed the steps but still cannot fix it.

My foooter script: <-- Vendor file included materialize.js -->

I realized that this not only happens with select, dropdown select have problem too. All dropdowns on my website have the same problem.

[pwcreative]

@chipcop106 Serving this patched select.js after serving materialize.js fixed it for me: https://github.com/Dogfalo/materialize/blob/v1-dev/js/select.js

 <script src="/js/materialize.min.js"></script>
 <script src="/js/select.js"></script>
 <script src="/js/yourcustom.js"></script>

I have followed the steps but still cannot fix it.

My foooter script: <-- Vendor file included materialize.js -->

I realized that this not only happens with select, dropdown select have problem too. All dropdowns on my website have the same problem.

This does fix the select in all cases that I’ve tried. I’ll build a codepen to demonstrate. If you look on the Gitter channel, somebody has found a temp fix to the dropdown - which is to removed the scale and opacity change from the css. If you can’t find it I’ll link to his example later this morning.

[pwcreative]

This is a working example of how the patched js file fixes the select issue.

https://codepen.io/doughballs/pen/jOPOGmW

I'm serving materialize.js via codepen, and the patched js by simply pasting it above my initialisation script.

This would actually be served as I stated above in production:

<script src="/js/materialize.min.js"></script><!-- core materialize -->
<script src="/js/select.js"></script><!-- patched js -->
<script src="/js/yourcustom.js"></script><!-- initialisation -->

[pwcreative]

An example of the fixed dropdown, from @webffo:

http://webffo.de/materialize/

He says:

"I have removed the animations (Animate in dropdown, Animate out dropdown) and it seems to work. Anyway, the only changes I made were in the .js file, lines 2670-2700, basically removing the animate."

[Dahkon]

Anychance we get a release fixed soon ? @Dogfalo Removing animation from drop down did the trick for me but a better fix would be appreciated.

[tuffant21]

@chipcop106 Serving this patched select.js after serving materialize.js fixed it for me: https://github.com/Dogfalo/materialize/blob/v1-dev/js/select.js

 <script src="/js/materialize.min.js"></script>
 <script src="/js/select.js"></script>
 <script src="/js/yourcustom.js"></script>

I have followed the steps but still cannot fix it.

My foooter script: <-- Vendor file included materialize.js -->

I realized that this not only happens with select, dropdown select have problem too. All dropdowns on my website have the same problem.

This worked for me, but I want to receive updates on this task so I can remove this fix later....

[mathewmeconry]

I know this library is probably not maintained anymore but here is a easy fix without recompiling the whole lib.

On initialization of the select or dropdown pass the option closeOnClick: false. This will prevent the dropdown from closing after the click and therefore ensures the right value be given.

To automatically close I wrote this little function which takes over the handling for the closing:

for selects:

function closeDropdowns()
   const elems = document.querySelectorAll('select')
   for (const elem of elems) {
      const instance = window.M.FormSelect.getInstance(elem)
      // a select instance has the dropdown instance stored and therefore we can access it
      // keep in mind that this is undocumented and could break with any release (which will probably never happen)
      instance.dropdown.close()
  }
}

for dropdowns:

function closeDropdowns()
  const elems = document.querySelectorAll('select')
  for (const elem of elems) {
      const instance = window.M.DropDown.getInstance(elem)
      instance.close()
  }
}

this function has to be called inside of the onChange event handler