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 10 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 10 years ago

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

Edyta Dabrowska answered 10 years ago

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

hockchuan answered 10 years ago

What's the timeline for the fix? Thanks.

Bartłomiej Malanowski staff pro premium answered 10 years ago

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

Rothert pro commented 8 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 10 years ago

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

Rothert pro answered 9 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