Close bug in long dropdown inside modal

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Close bug in long dropdown inside modal

hockchuan asked 8 years ago

I am using some dropdowns in the modal. If the dropdown list contains many items that causes the scrollbar to appear and then I use mouse on the scrollbar, the list will simply close. But it doesn't exhibit the close issue if I use mouse wheel instead. 

            <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#centralModalInfo">Central Modal</button>
            <div class="modal fade" id="centralModalInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-notify modal-info" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <p class="heading lead">Modal Info</p>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true" class="white-text">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <select class="mdb-select">
                                <option value="" disabled selected>Choose your option</option>
                                <option value="1">Option 1</option>
                                <option value="2">Option 2</option>
                                <option value="3">Option 3</option>
                                <option value="4">Option 4</option>
                                -- Truncated for brevity
                            </select>
                            <label>Example label</label>
                        </div>
                    </div>
                </div>
            </div>

tblfounder pro answered 8 years ago

Try taking out the tabindex="-1". This worked for me...

Edyta Dabrowska answered 8 years ago

Hello, Thank you for noticing this. We will try to fix this in the future. Regards,

hockchuan answered 8 years ago

What's the timeline for the fix? Thanks.

Bartłomiej Malanowski staff pro premium answered 8 years ago

We're working on the new version of MDB. Currently, we cannot provide you estimated time

Rothert pro commented 6 years ago

Hello, Seems that this issue is still unsolved, because I’m facing the same problem with MDB pro V4.5.7 Unfortunately, removing the tabindex=”-1″ on the Modal, does not fix the issue in my case. This only happens when a scrollbar appears in the drop-down list Any idea? Thanks a lot Best regards Peter

hockchuan answered 8 years ago

Thanks, tblfounder. The removal of tabindex="1" fixed my issue.

Rothert pro answered 7 years ago

Hello, Seems that this issue is  still unsolved, because I'm facing the same problem with MDB pro V4.5.2 Unfortunately, removing the tabindex="-1" on the Modal, does not fix the issue in my case. This only happens when a scrollbar appears in the drop-down list Any idea? Thanks a lot Best regards Peter
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
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
hockchuan
27Support score
4Questions 4Answers
0Snippets likes 0Snippets