Topic: Select not working - options not appearing on click

coreystinson2 pro asked 7 years ago


Hi, I am having trouble with the material select in my application. The element looks as if it is initializing as expected, however the click event is not bringing up the available options. It is being registered and I have debugged the stack trace as best I can and suspect it may have something to do with line :11062 $(this).trigger('open'); I cannot find where the open event is being bound to the select element. This is my sample HTML, and initialization is being called on a document ready as per the example.

<select ng-model="foo">
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select>
This is my rendered HTML in source. This is my rendered ul in source. This is my visual for the element

Igor Babko pro answered 7 years ago


Thanks, coreystinson2! Loading bootstrap.js before mdb.js did the trick!

dominofoe pro answered 7 years ago


Thanks a lot! This solution should be on the Material Select page as a side note or disclaimer.

Michal Szymanski staff answered 7 years ago


I'm glad you've found a solution!

coreystinson2 pro answered 7 years ago


Hi Michal, I'm not really proud to say this but I identified the problem due to the order in which I was loading bootstrap.js and mdb.js in my application. Thanks for taking the time to look into this for me. For anybody else looking at this thread. You must load bootstrap.js prior to mdb.js.

<script type="text/javascript" src="assets/bootstrap.js"></script>
<script type="text/javascript" src="assets/mdb.js"></script>
Thanks again and apologies for wasting your time.

Michal Szymanski staff answered 7 years ago


I'll investigate the problem and come back to you if I'll find a solution. However it can be hard, because any of our developer have tried to integrate MDB with Angular 1. I'm sorry I cannot offer you more help at this moment.

coreystinson2 pro answered 7 years ago


I'm now looking at line 11456 of mdb.js for the $(this).trigger('open'); method that I think may be the cause of the issue. Can confirm that activateOption is being called with the correct identified item from my select.

coreystinson2 pro answered 7 years ago


I have updated to package MDB PRO 3.4.1 and can confirm changes due to the ul element now being bound within the parent of the initial select element. Unfortunately the problem is still here, clicking the new input element is doing nothing. I will investigate for a little while and let you know what I find.

Michal Szymanski staff answered 7 years ago


Before we go any further, please update to MDB 3.4.1. You can download package from your MDB account.

Michal Szymanski staff answered 7 years ago


Yes, I can see it, my fault. Sorry. I am investigating the problem, give me a minute.

coreystinson2 pro answered 7 years ago


I am using MDB PRO 3.4.0 - I did write this when I opened the ticket, not sure why it's not showing.

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags