Topic: Old materialSelect problem still exists (closes on-click)
As notified previously, the bug where the materialSelect drop down closes on-touch on it, instead of allowing it to scroll down, still exits in 4.7.7 and in the new 4.8.0. The issue is FINE in a classic single drop-down scenario, but in the following scenario, the issue still exists:
A main selection made, defines which secondary level <select> should open. So, if option value=1 is selected, then #sub1 opens. If option value=2 is selected, then #sub2 opens, and so on.
I have built a snippet where you can see the functionality.
Where you want to select one of the lower down options, which is initially hidden beneath the fold (eg, sub option 30) - the select immediately closes instead of allowing you to scroll down to see more options than the ones visible.
Note, on PC is works perfectly, the issue is in mobile only. and, you need to make sure to view the snippet in fullscreen mode, on your mobile to see the issue.
https://mdbootstrap.com/snippets/jquery/moshe/634888?action=fullscreen
Hope this can be resolved soon - thanks!
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.7.7
- Device: Mobile
- Browser: Chrome/Firefox
- OS: Android
- Provided sample code: Yes
- Provided link: Yes
Piotr Glejzer staff commented 5 years ago
I checked on my mobile device ( v. 4.8.0 ) and I can scroll without immediately closed menu. Do you have an example with that problem on your site? Snippets are not updated to 4.8.0 :( ( idk why )
Kneidels pro commented 5 years ago
Sure, here is a test: http://bit.ly/308G0zJ you need to make an initial selection and then you will get the 2nd drop down.
REMEMBER - MOBILE ONLY
Thanks!
Piotr Glejzer staff commented 5 years ago
Thanks for this! But we already updated our snippets to the latest version. I checked your example in our snippets and I can scroll and I don't have any unpredictable closing menu. I checked it on my smartphone ( Android 8+ ).
https://mdbootstrap.com/snippets/jquery/piotr-glejzer/667288
Kneidels pro commented 5 years ago
Thanks - yours seems to work.
Question why mine does not - http://bit.ly/308G0zJ I think its because mine open dynamically. can you refer to this issue? and possibly make a similar test (in your example they do NOT open dynamically) Thanks
Piotr Glejzer staff commented 5 years ago
What do you mean open dynamically? Are you using some ajax/fetch to render these options?
Kneidels pro commented 5 years ago
No ajax - as i explained above: the submenus are all in the code, just hidden initially. sub menu #1 opens if you select option #1 in the main select; sub menu #2 opens if you select option #2 in the main select; and so on... pls see my code example - http://bit.ly/308G0zJ
Piotr Glejzer staff commented 5 years ago
https://mdbootstrap.com/snippets/jquery/piotr-glejzer/683075 - check this.
Every select should has class mdb-select.
Kneidels pro commented 5 years ago
I am initializing
materialSelecton the fly, when i need that specific menu. Thats why i dont have that class on all the selects on page load.Can you try that and see?
Piotr Glejzer staff commented 5 years ago
Yes, I see but if you don't want to have that unpredictable close menu when you are clicking on it, you have to have that class because there is a fix with a bug with chrome 73 ( https://bugs.chromium.org/p/chromium/issues/detail?id=941910 ) and this fix depends on that class.
Kneidels pro commented 5 years ago
Understood, i can confirm the fix works. Is there any different between having the class on the select in the html code, or better to apply it via JS, as in your example?
Piotr Glejzer staff commented 5 years ago
I did it because this is the fastest way to do it. If you want you can do it manually in HTML. For bigger projects, if you will have thousands of lines of code you will do it by js for save time.