Problem with a select inside a long modal


Topic: Problem with a select inside a long modal

Gucciardi pro premium priority asked 3 months ago

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)


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
  • 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