Materialize Select Dropdown Not Working

[kikithedeveloper]

Just the regular single select dropdown is not working for me. I don't need a dynamic one, just the static one for now.

  <div class="input-field col s12">
    <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>
    </select>
    <label>Materialize Select</label>
  </div>

Other form elements like Text fields, including all input fields, Icon Prefixes, Textarea, they all work, but the single select dropdown is not working for me.

Any idea what I could be doing wrong or what's missing or what's causing this?

Thank you for your reply.

Kimberly

[rubyboy]

@kikithedeveloper see here the documentation on dropdown: http://materializecss.com/dropdown.html You should be using a different element and styling for dropdowns. Here's sample code: https://github.com/InfomediaLtd/angular2-materialize/blob/master/sample/src/app/components/dropdown.ts

<!-- Dropdown Trigger -->
<a materialize="dropdown" class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
  <li><a>one</a></li>
  <li><a>two</a></li>
  <li class="divider"></li>
  <li><a>three</a></li>
</ul>

[kikithedeveloper]

Hi @rubyboy Thanks for the sample code reference because it gave me more to try out. And I apologize that I wasn't clear.

What I am trying to accomplish is this Form's input single select dropdown.

Reference: https://github.com/InfomediaLtd/angular2-materialize/blob/master/sample/src/app/components/forms.ts

Sample code that I want to accomplish (single-select and multi-select):

          <div class="row">
            <div class="input-field col s6">
              <select name="singleSelect" [(ngModel)]="selectedOption" name="selectedOption" materialize="material_select" [materializeSelectOptions]="selectOptions" [disabled]="isDisabled?true:null">
                <option value="" disabled selected>Choose your option</option>
                <option *ngFor="let option of selectOptions" [value]="option.value">{{option.name}}</option>
              </select>
              <label>Materialize Select</label>
            </div>
            <div class="input-field col s6">
              <select name="multiSelect" [(ngModel)]="selectedOptions" multiple materialize="material_select" [materializeSelectOptions]="selectOptions" [disabled]="isDisabled?true:null">
                <option value="" disabled selected>Choose your option</option>
                <option *ngFor="let option of selectOptions" [value]="option.value">{{option.name}}</option>
              </select>
              <label>Materialize Multi Select</label>
            </div>
          </div>

I had everything set up following the entire sample code file, including html, ts. I made sure to import MaterialDirective and be sure to include the attribute materialize in these elements.

Everything in the form work, except these two input select dropdown, single-select and multi-select. I noticed the code below.

    window.setTimeout(()=>{
      this.selectOptions = [
        {value:1,name:"Option 1"},
        {value:2,name:"Option 2"},
        {value:3,name:"Option 3"}
      ]
    },100);

I tested it by adding a simple console.log to see if it's completing the timer and it's working.

So, I am not entirely sure if this is a bug or if something is missing.

[kikithedeveloper]

@rubyboy I came across this issue and you noticed that there's no initial model selection. That's actually the problem for me. Everything works, except these two form input selection.

https://github.com/InfomediaLtd/angular2-materialize/issues/21#issuecomment-215095835

[kikithedeveloper]

Ok........ So.......... This is kind of a bit of a mind scratcher........ I decided to play with the time and just increased it to 10000 ms. And it works...

    window.setTimeout(()=>{
      console.log("setTimeOut is completed.");
      this.selectOptions = [
        {value:1,name:"Option 1"},
        {value:2,name:"Option 2"},
        {value:3,name:"Option 3"}
      ]
    },10000);

[kikithedeveloper]

So, I had three regular tabs. In first tab, the input select dropdown works. In the 2nd tab, the input select dropdown did not work. After I turned the tabs into tab-like nav with links to three children routes, all the dropdowns across different tabs work. I think it's because the ngOnInit only works for the components currently rendered and not for the hidden elements / components.

[rubyboy]

@kikithedeveloper is this issue still relevant? If it is, are you able to create a reproducible bug code? (repo or sample code of a component that reproduces the issue). Thanks.

[rexsateesh]

Its working for me

<div class="input-field col s12">
    <select formControlName="status" [(ngModel)]="selectedStatus" materialize="material_select">
        <option [ngValue]="" disabled>Select</option>
        <option [ngValue]="1">Enable</option>
        <option [ngValue]="0">Disable</option>
    </select>
    <label>Status</label>
</div>

[timeo-schmidt]

Hello! I am having a similar problem with the option/select element. My <option> elements are loaded in from an API, and there is therefore a short timelag before the *ngFor is populated.

The <select> however gets initialised before that, and the new elements are not loaded into it. When I "hard code" the *ngFor array, everything works perfectly fine.

Is there a possibility to manually initialise the component, or does anyone know of any other workaround?

I would be incredibly grateful for any type of help.

All the Best! :)

[Mistborn94]

@timeo-schmidt We have solved problems like that with the materializeSelectOptions directive

From the readme:

For dynamic select elements apply the materializeSelectOptions directive to trigger element updates when the options list changes

[allebd]

This below solved it form me

$(document).ready(function(){ $('select').not('.disabled').formSelect(); });

[shumichenko]

This below solved it form me

$(document).ready(function(){ $('select').not('.disabled').formSelect(); });

THANK YOU, allebd

[ahmedseaf]

This below solved it form me

$(document).ready(function(){ $('select').not('.disabled').formSelect(); });

thank you

[xErik444x]

This below solved it form me

$(document).ready(function(){ $('select').not('.disabled').formSelect(); });

LOVE U <3

[jitheshkramesh]

Below codes solved my issues. Index.html under the script, please add the below codes.

Thanks..