Select not working - options not appearing on click

Topic: Select not working - options not appearing on click

coreystinson2 pro asked 8 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

Add comment

Igor Babko pro answered 7 years ago

0 0 Best answer

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

Add comment

dominofoe pro answered 8 years ago

0 0 Best answer

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

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

I'm glad you've found a solution!

Add comment

coreystinson2 pro answered 8 years ago

1 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

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.

Add comment

coreystinson2 pro answered 8 years ago

0 0 Best answer

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.

Add comment

coreystinson2 pro answered 8 years ago

0 0 Best answer

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.

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

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

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

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

Add comment

coreystinson2 pro answered 8 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

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

coreystinson2

Pro User 86Support score
3Questions 9Answers 0Snippets