Topic: Dropdown needs 2 clicks to activate

jkf pro asked 5 years ago


Hey, We updated to the Pro version 4.4.1. All was working before version 4.4.1. We also had and have some problems with the new popper.js file. Here is the problem: We have an dropdown menu. If you click on it nothing happens. But if you click a second time on the same dropdown, then it works. Strange. Thanks Jorg

s007 pro commented 5 years ago

Hello! we have this same problem! urgently need help!

jprzybylko free answered 3 years ago


Hi MDBoostrap, I am also facing this exact same issue.

On the first click, the dropdown opens and closes automatically near instantly. However, it opens correctly on second click. Same repeats with 3rd click, 5th click, so on...

Specifically, it is happening on the datatable select.


jprzybylko free commented 3 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 commented 3 years ago

What's your version of MDB?


jprzybylko free commented 3 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 free commented 3 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 free commented 3 years ago

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


Vaibhav Nigam free commented 3 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 free commented 3 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 commented 3 years ago

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


Vaibhav Nigam free commented 3 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 free commented 3 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"'


Vaibhav Nigam free answered 3 years ago


I'm still facing this issue with select component. On first click, the dropdown opens and closes automatically with below in browser console logs. However, it opens correctly on second click. Same repeats with 3rd click, 5th click, so on...

[Violation] Forced reflow while executing JavaScript took 40ms

I'm using MDB Pro 4.7.3.


Dani R free answered 3 years ago


I have the same problem when I used some of them together


Bartłomiej Malanowski staff commented 3 years ago

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


jkf pro answered 5 years ago


Hi, I use the latest Chrome Browser. And we still have this problem and need help. Regards

Mirosław Stasiak free answered 5 years ago


Hi, What browser do you use? Check this example in codepen.io. https://codepen.io/mirekmts/pen/MEKBqO Check if there are any bugs in the console Regards,

s007 pro commented 5 years ago

in https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.js - this is mdb free in mdb pro: // Bootstrap API hooks // ========================= dropdownSelectors.on({ "show.bs.dropdown": function () { // On show, start in effect $(this).find('.dropdown-menu').first().stop(true, true).fadeIn(); var dropdown = dropdownEffectData(this); dropdownEffectStart(dropdown, dropdown.effectIn); }, "shown.bs.dropdown": function () { // On shown, remove in effect once complete var dropdown = dropdownEffectData(this); if (dropdown.effectIn && dropdown.effectOut) { dropdownEffectEnd(dropdown, function () {}); } }, "hide.bs.dropdown": function (e) { // On hide, start out effect $(this).find('.dropdown-menu').first().stop(true, true).fadeOut(); var dropdown = dropdownEffectData(this); if (dropdown.effectOut) { e.preventDefault(); dropdownEffectStart(dropdown, dropdown.effectOut); dropdownEffectEnd(dropdown, function () { dropdown.dropdown.removeClass('open'); dropdown.dropdown.removeClass('show'); }); } }, }); it does not work on https://mdbootstrap.com/ (dropdown menu "Profile")


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags