Materialize: [v1.0.0] Dropdown bug mobile

[MicheleLucini]

Expected Behavior

On mobile the dropdown options onclick does not fire when "clicked/tapped".

Current Behavior

Doesn't happen, i noticed that it works fine if i keep the option pressed for 1s.

Steps to Reproduce (for bugs)

Click the dropdown trigger and the try to tap one of the options.
Onclick events do not fire.
I'm using a huawei p20 lite but happens with other devices too.
Browser: chrome

[Mlkito]

I am having the same issue (iphone XR / Ipad 6) on chrome and safari. Didn't have this issue one week ago I think.

[rylanb]

There was just a fix to master by the maintainer @Dogfalo -> https://github.com/Dogfalo/materialize/commit/c0da34049deec36efbd4681f73b3446e92918ca8 to fix this.

Mentioned in this thread: https://github.com/Dogfalo/materialize/issues/6444#event-2671340700

Edit: I apologize, I thought this was the same issue, but re-read after commenting (its late and I hiked a lot today) and I may have missed the mark on them being the same bug. But might be worth getting latest master to see if its fixed.

[MicheleLucini]

Now that i noticed, select have the same bug.
Select and dropdown inputs do not work on mobile.
Please it's important.

[xeph]

I'm having the same issue here. I can reproduce this bug on PC with Firefox by going into the Web Developer --> Toggle Tools --> Responsive Design Mode and changing the screen resolution (1336x1024). At this resolution the dropdown option in a navbar doesn't seems to work.

[Dogfalo]

I fixed it in a recent commit

On Fri, Oct 4, 2019 at 6:25 AM xeph [e-mail] wrote:

I'm having the same issue here. I can reproduce this bug on PC with
Firefox by going into the Web Developer --> Toggle Tools --> Responsive
Design Mode and changing the screen resolution (1336x1024). At this
resolution the dropdown option in a navbar doesn't seems to work

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/6449?email_source=notifications&email_token=AAVFVR4ZR5AU6VMVXPAZYCLQM475ZA5CNFSM4I2NW3Y2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEALUG5A#issuecomment-538395508,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVFVR3W3HB4RKED6CGTWKDQM475ZANCNFSM4I2NW3YQ
.

>

Doggy sends his greetings from Mars.

[xeph]

I fixed it in a recent commit
On Fri, Oct 4, 2019 at 6:25 AM xeph @.*> wrote: I'm having the same issue here. I can reproduce this bug on PC with Firefox by going into the Web Developer --> Toggle Tools --> Responsive Design Mode and changing the screen resolution (1336x1024). At this resolution the dropdown option in a navbar doesn't seems to work — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6449?email_source=notifications&email_token=AAVFVR4ZR5AU6VMVXPAZYCLQM475ZA5CNFSM4I2NW3Y2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEALUG5A#issuecomment-538395508>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVFVR3W3HB4RKED6CGTWKDQM475ZANCNFSM4I2NW3YQ .
-- Doggy sends his greetings from Mars.

Doesn't seems to be fixed in materialize/dist/js. Same in materialize/releases/

[Dogfalo]

It hasn't been released

On Fri, Oct 4, 2019 at 7:46 AM xeph [e-mail] wrote:

I fixed it in a recent commit
On Fri, Oct 4, 2019 at 6:25 AM xeph @.*> wrote: I'm having the same
issue here. I can reproduce this bug on PC with Firefox by going into the
Web Developer --> Toggle Tools --> Responsive Design Mode and changing the
screen resolution (1336x1024). At this resolution the dropdown option in a
navbar doesn't seems to work — You are receiving this because you were
mentioned. Reply to this email directly, view it on GitHub <#6449
https://github.com/Dogfalo/materialize/issues/6449?email_source=notifications&email_token=AAVFVR4ZR5AU6VMVXPAZYCLQM475ZA5CNFSM4I2NW3Y2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEALUG5A#issuecomment-538395508>,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVFVR3W3HB4RKED6CGTWKDQM475ZANCNFSM4I2NW3YQ
.
-- Doggy sends his greetings from Mars.

Doesn't seems to be fixed in materialize/dist/js. Same in
materialize/releases/

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/6449?email_source=notifications&email_token=AAVFVRYXKXRY32AG44VG4FDQM5JL5A5CNFSM4I2NW3Y2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAL4E4Y#issuecomment-538428019,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAVFVR2XQZZJDB7EQQH5SKTQM5JL5ANCNFSM4I2NW3YQ
.

>

Doggy sends his greetings from Mars.

[xeph]

It hasn't been released
On Fri, Oct 4, 2019 at 7:46 AM xeph @.> wrote: I fixed it in a recent commit On Fri, Oct 4, 2019 at 6:25 AM xeph *@.*> wrote: I'm having the same issue here. I can reproduce this bug on PC with Firefox by going into the Web Developer --> Toggle Tools --> Responsive Design Mode and changing the screen resolution (1336x1024). At this resolution the dropdown option in a navbar doesn't seems to work — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6449 <#6449>?email_source=notifications&email_token=AAVFVR4ZR5AU6VMVXPAZYCLQM475ZA5CNFSM4I2NW3Y2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEALUG5A#issuecomment-538395508>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVFVR3W3HB4RKED6CGTWKDQM475ZANCNFSM4I2NW3YQ . -- Doggy sends his greetings from Mars. Doesn't seems to be fixed in materialize/dist/js. Same in materialize/releases/ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6449?email_source=notifications&email_token=AAVFVRYXKXRY32AG44VG4FDQM5JL5A5CNFSM4I2NW3Y2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAL4E4Y#issuecomment-538428019>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAVFVR2XQZZJDB7EQQH5SKTQM5JL5ANCNFSM4I2NW3YQ .
-- Doggy sends his greetings from Mars.

Do you have an idea when will it be released? The last version dates from a year ago.

[MicheleLucini]

@Dogfalo Thanks!

[xeph]

@MicheleLucini Even after compiling from source it won't work for me. If it works for you can you share me what you did?

[MicheleLucini]

@xeph it hasn't been released yet

[Maverick0809]

c0da340
fixes the Select function, but NOT the dropdown navbar options with iOS 13.1.2

Any ideas?

[joshualyon]

@Dogfalo were you saying that the recent commit was supposed to fix Dropdown or just Select?

I'm seeing the same thing as @Maverick0809; Select is fixed with commit c0da340 but Dropdown still has the issue on iOS 13.

[joshualyon]

@MicheleLucini I noticed that you closed this issue, but have you verified the fix? Commit c0da340 seems to have fixed the issues with Select components, but Dropdown components are still exhibiting issues in my testing.

[MicheleLucini]

Dogfalo said he fixed it but didn't realesed yet.

[MicheleLucini]

well, 48 days later and it's still bugged...

[MicheleLucini]

and we are talking about select and dropdown, basic and fundamental stuff

[ratstache]

Yeah, a release for this would be fantastic

[austinbachman]

Agreed, a release for this would be fantastic

[basicBrogrammer]

https://media.giphy.com/media/xULW8hNotUdPTMaQBG/giphy.gif

[Maverick0809]

When will this be fixed?😑

[MicheleLucini]

@Dogfalo listen to our prayers

[MicheleLucini]

Hey guys! I found a solution that worked for me.

I changed the viewport metatag with
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
and now it works 😥

Solution by cpelikan from this thread.

[Maverick0809]

Hey guys! I found a solution that worked for me.

I changed the viewport metatag with
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
and now it works 😥

Solution by cpelikan from this thread.

no solution here

[Ryan778]

Here's a "solution" (much more of a ghetto hack than an actual solution) that I found to be working for me.

• Initialize the dropdown such that closeOnClick is set to false, as that seems to be causing the issue
• Manually add your own event handler onto the elements within the dropdown menu that close it after being clicked/tapped

It's not pretty, but it appears to do the trick.

[basicBrogrammer]

Has materializecss died? 😭 😭 😭

[4lenz1]

I add "browser-default" class in select element to avoid this problem for temporary solution.

and detect which platform are using if running your app under multi devices so that we can use default select under specific platform.

hoping it helps :D

[jftim7]

@Ryan778

In your last post you gave a "ghetto" hack solution. I wanted to try this but am having trouble doing the first part.

• Initialize the dropdown such that closeOnClick is set to false, as that seems to be causing the issue

Mostly because I'm novice, also because I am using javascript, not jquery, so examples are slim. Here's what i'm trying,

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
elems.closeOnClick = false;
var instances = M.FormSelect.init(elems);
});

But it has no effect as the select still closes on click?

[Ryan778]

@jftim7
The closeOnClick is a Materialize setting, not a native one, so it'd be under the init function.
I believe the FormSelect simply uses a dropdown (the dropdown is the actual component that has the "closeOnClick" option), so you'd need to put the dropdownOptions: {closeOnClick: false} into the options parameter.

Alternatively, the Select component seems to have been patched with https://github.com/Dogfalo/materialize/commit/c0da34049deec36efbd4681f73b3446e92918ca8, so if you're able to build your own files you can incorporate the patch into it.

[jftim7]

@Ryan778
I appreciate the help. I was trying to stay away from doing my own build, but it may end up in that way.

I attempted to put the dropdownOptions: {closeOnClick: false} into the options parameter, but I think I'm still doing it wrong as when I select, the selection box still closes. Here's the code snippet:

document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var dropdownOptions = {closeOnClick: false};
var instances = M.FormSelect.init(elems, dropdownOptions);
});