Topic: Problem with a select inside a long modal

Jacopo Gucciardi priority asked 1 month 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


Kamila Pieńkowska staff answered 3 weeks ago


Unfortunately this is a bug we are aware of and we are already working on fixing it.


Jacopo Gucciardi priority commented 2 days 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)


Jacopo Gucciardi priority answered 3 weeks 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.


Jacopo Gucciardi priority answered 3 weeks 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



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