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
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
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.
Unfortunately this is a bug we are aware of and we are already working on fixing it.
Jacopo Gucciardi pro premium priority commented 3 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