Topic: Dropdown needs 2 clicks to activate
jkf pro asked 7 years ago
jprzybylko free answered 5 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 5 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 5 years ago
What's your version of MDB?
jprzybylko free commented 5 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 5 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 5 years ago
The problem seems to be limited to chrome. Firefox and Safari do not exhibit this behavior.
Vaibhav Nigam free commented 5 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 5 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 5 years ago
The problem is already on our TODO list so this should be fixed soon
Vaibhav Nigam free commented 5 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 5 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 5 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 5 years ago
I have the same problem when I used some of them together
Bartłomiej Malanowski staff commented 5 years ago
What's your version of MDB? Can you create a snippet with your issue?
jkf pro answered 7 years ago
Mirosław Stasiak free answered 7 years ago
s007 pro commented 7 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")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: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
s007 pro commented 7 years ago
Hello! we have this same problem! urgently need help!