Topic: Problem with a select inside a long modal
I have a page with a modal. The modal includes a form that can be quite long and it could require scrolling down fill it. At the bottom of this form there's a Select.
Expected behavior User should be allowed to select a value in a Select
Actual behavior When the user clicks on an Option inside the Select the page is scrolled up and no selection occurs
Resources (screenshots, code snippets etc.)
Here's a working snippet that demonstrate this issue: https://mdbootstrap.com/snippets/standard/gucciardi/6236839
Jacopo Gucciardi pro premium priority answered 2 months ago
I have updated the snippet with more detailed instructions. Also worth noticing that this issue doesn't happen every time the page is loaded. So please try again a few times
Jacopo Gucciardi pro premium priority answered 2 months ago
I've done a bit of debugging and here's what I've discovered:when the user clicks an option in the select at the top of the page, this function from event-handler.js is called
function bootstrapHandler(element, fn) {
return function handler(event) {
event.delegateTarget = element;
if (handler.oneOff) {
EventHandler.off(element, event.type, fn);
}
return fn.apply(element, [event]);
};}
In this context the variable "element" points to a div.select-options-wrapper.
Instead, when the user clicks an option inside the Select at the bottom of the page, the variable "element" points to the whole document and the selection fails.
Kamila Pieńkowska staff answered 2 months ago
Unfortunately this is a bug we are aware of and we are already working on fixing it.
Jacopo Gucciardi pro premium priority commented 2 months ago
Hello, I've found on another thread (https://mdbootstrap.com/support/standard/select-with-search-not-working-in-modal-dialogs/) the suggestion to add data-mdb-container="#modalAdd" to the modal definition. In my experience this helped on some browser, but it is not always working (expecially on Chrome)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.2.0
- Device: Desktop pc
- Browser: Chrome
- OS: Windows 11
- Provided sample code: No
- Provided link: Yes