1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Select drop down list disappear on scrollbar mousedown

bilalamalik free asked 6 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

Pain786 free answered 3 years ago

searchable="Search here.."

make the dropdown with search it will resolve the issue

Marcin Luczak staff commented 3 years ago

Hi @Pain786,

Thank you for helping our community :)

Regards, Marcin

Jakub Strebeyko staff answered 6 years ago

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 free commented 6 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 6 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

Mikołaj Smoleński staff answered 6 years ago

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 free commented 6 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

Jakub Strebeyko staff answered 6 years ago

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 free commented 6 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 6 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 free commented 6 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/

Jakub Strebeyko staff answered 6 years ago

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 free commented 6 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/
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

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

Answered

Specification of the issue
  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
About author
bilalamalik
2Support score
1Questions 0Answers 0Snippets