Dropdown needs 2 clicks to activate

s007 pro commented 7 years ago

Bartłomiej Malanowski staff pro premium commented 6 years ago

What's your version of MDB? Can you create a snippet with your issue?

jprzybylko commented 6 years ago

I fixed the problem with the first click by adding a click handler to stop event propagation. But the problem re-occurs after the second click :(

I have tripple checked and am not loading any libraries more than once

$('.mdb-select').materialSelect();

$('.mdb-select').click(function( event ) {
    event.stopPropagation();
});  // fixes first click

Bartłomiej Malanowski staff pro premium commented 6 years ago

What's your version of MDB?

jprzybylko commented 6 years ago

Currently running MDB PRO 4.5.15 (JQuery). I can try to upgrade if you think it will help. It is happening on the data-table select drop down for how many rows to show.

jprzybylko commented 6 years ago

Hi, I am using MDB PRO 4.5.15 (Jquery). I am happy to update if it may fix the issue. It is occurring on the pro datatable on the select toggle for how many rows to show. I have pretty much the default setup. Any advice?

jprzybylko commented 6 years ago

The problem seems to be limited to chrome. Firefox and Safari do not exhibit this behavior.

Vaibhav Nigam commented 6 years ago

@jprzybylko As I mentioned above, this issue is still reproducible with MDB Pro 4.7.3 (jQuery). So, obviously update might not fix it. Waiting for a response from MDB team.

nupzwsi commented 6 years ago

@jprzybylko Hey guys, i've had same issue. It's issue related to chrome 73 update, there is a fix: https://github.com/Dogfalo/materialize/pull/6339

Note that materialize.js isn't updated yet, so you need to use grunt to rebuild it yourself or import modified file import 'materialize-css/js/forms'

Bartłomiej Malanowski staff pro premium commented 6 years ago

The problem is already on our TODO list so this should be fixed soon

Vaibhav Nigam commented 6 years ago

Thanks @Bartłomiej Malanowski for the update.

@nupzwsi Really thanks for the pointer. I finally fixed it using: $('.mdb-select').click(e => e.stopPropagation());

jprzybylko commented 6 years ago

Fantastic to hear you fixed it Vaibhav :DThanks everyone for your help.

For others on this thread ... as mentioned above:$('.mdb-select').click(e => e.stopPropagation());" didnt fully fix the problem for me when using mdb select with the mdb datatable. It works for most other scenrarios.

For use with the datatable .. add the click handler to the parent div of the "mdb-select". This is by default set as "tableid_length" using md datatable. This is what I have:

$('.mdb-select').materialSelect();

$('#my_table_length').on("click",function(event){
    event.stopPropagation();
});

where my tableid is defined here "my_table" as per the table html tag:

HTML table tag: 'table id="mytable" class="table table-striped"'