Select drop down list disappear on scrollbar mousedown

Topic: Select drop down list disappear on scrollbar mousedown

bilalamalik asked 7 years ago

Hi, I am using MDbootstrap Version: 4.2.1 I have a similar issue as https://mdbootstrap.com/support/select-dropdown-closing-on-scrollbar-mousedown not sure is there any solution for this ? I have 200+ countries in the drop-down list, the scroll works fine with the mouse wheel or down or up arrows, but when i try to drag the scrollbar the whole list disappears. Thanks

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

Hi there bilalamalik, Have you tried following the link? If the solution provided there did not help you resolve the issue, share your drop-down list usage here. With Best Regards, Kuba

bilalamalik commented 7 years ago

Hi There, Thanks for your reply, I also found out that the code works fine when if its in the normal page, but i am using select drop down in the modal window this is where we facing an issue, I am sharing my code with you with a live example. you will see mdb-select inside the modal window when you will try to scroll with scrollbar, list will disappear. Thanks Url: http://bilalamalik.com/mdb-test/

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

Hi there bilalamalik, I wasn't able to recreate the described behavior - the mdb-select works fine from within the modal, maybe except its obvious bias towards Canada. What browser are you using? with Best Regards, Kuba

bilalamalik commented 7 years ago

We are using Google Chrome, but we want to make sure it works for all browsers. Steps for reproducing: 1. Navigate to http://bilalamalik.com/mdb-test/ 2. Click on the pulsing green 'Show Modal' button. 3. Click on the dropdown. It will open up the dropdown with the scrollbar on the right 4. When you click on the scrollbar, it immediately disappears.

Jakub Strebeyko staff commented 7 years ago

Hi there bilalamalik, What about MDB jQuery version? This sounds like a bug that has been repaired in the newest version (4.4.5). Best, Kuba

bilalamalik commented 7 years ago

Hi again, we were using the Version: 4.2.1 now i have updated the version to the newest version (4.4.5) but the issue is still the same. http://bilalamalik.com/mdb-test/

Add comment

Mikołaj Smoleński staff answered 7 years ago

0 0 Best answer

Hi , Please add the following code to mdb.js file inside material_select function (line ~19225):

// if select is wrapped in modal prevent hiding

options.on('mousedown', function (e) {

if ($('.modal-content').find(options).length) {

if (this.scrollHeight>this.offsetHeight) {

e.preventDefault();

}

});

It will be fixed with the next release. Regards

bilalamalik commented 7 years ago

Hi Thanks for providing us the solution, that problem is resolved now but the list does not disappear when we select/click a list item. Link is updated you can check the problem here Steps for reproducing: 1. Navigate to http://bilalamalik.com/mdb-test/ 2. Click on the pulsing green ‘Show Modal’ button. 3. Click on the dropdown. 4. Click on any list item, dropdown does not disappear

Add comment

Jakub Strebeyko staff answered 7 years ago

0 0 Best answer

Hi there bilalamalik, Thanks for sticking with us while we fix the problem. The issue turns out more complex than we previously thought it is, as modal's and select's natures intermingle. Where we stand currently is that the browser does not consider the scrollbar an option (meaning - it is part of the area outside) and thus clicking it makes the menu close. The suggested fix reverses this situation - disables auto-close and so clicking the scrollbar does not close the menu, but clicking an option does not, neither. We are adding it to our list of developments, will get to work the issue through shortly - the solution is scheduled for 4.5.1 release. With Best Regards, Kuba

bilalamalik commented 7 years ago

Hi there, I download the new version of MDbootstarp MDB 4.5.4 but the above mention problem is still the same. Steps for reproducing: 1. Navigate to http://bilalamalik.com/mdb-test/ 2. Click on the pulsing green ‘Show Modal’ button. 3. Click on the dropdown. 4. Click on any list item, dropdown does not disappear Thanks

Jakub Strebeyko staff commented 7 years ago

Yes, the issue persists. We will have the team investigate the issue in the next release cycle, but we make no promises about when it will be resolved. Best, Kuba

Add comment

Pain786 answered 4 years ago