Materialize: The select-value isn't updating

[MichaelDeBoey]

I'm using the Angular 2 two-way binding on the select.
When I select another value in the list, that doesn't reflect to the select, so my ngModel isn't updating.
When i use the browser-default class all works fine, but I offcourse want to see the materialized select :smile:

[Deniscapp]

I am having the same problem. Any solutions so far? :/

[Thanood]

Apparently, Materialize select only raises a jQuery event but not a native event.
With Aurelia I had to raise a CustomEvent on jQuery.on('change') to make that happen.

let event = new CustomEvent('change', {
    detail: someData,
    bubbles: true
  });
element.dispatchEvent(event);

Maybe that also works for Angular 2.

[carlosperate]

Materialize creates a new element for the select, so Angular is probably updating the original hidden one. You can destroy and/or recreate the selects which should refresh it. Have a search on the issue tracker, this has been brought up a couple of times, so there might be solutions already explained in those.

[tceydeliler]

I have same problem. Thats why I had to use browser default. Not good looking :(

[Thanood]

Is the custom event "trick" mentioned above not working?

[tceydeliler]

Honestly I am not java familiar.
Need to describe where i put this trick

[Thanood]

Well, the select component issues a jQuery change event.

You would have to adapt this to the framework you use (if any).

Somewhere after initialization, try to put this:

jQuery('.my-select').on('change', function() {
  var event = new CustomEvent('change', {
    detail: {}, // this is optional, you could for example put the selected option here
    bubbles: true
  });
  element.dispatchEvent(event);
});

Replace .my-select' with the selector for your select.

See this CodePen as an example:
http://codepen.io/anon/pen/yOovGw

[tceydeliler]

ahh, sorry,
I think I misunderstood.
My problem is;
I cant set the value as selected that read from database when I use materialize-select. have u any idea about that?

[Thanood]

Oh no, I think that I completely misunderstood the issue.
I have no "real" idea, sorry. But I think you would have to manipulate the original select and then refresh the Materialize.

[ghost]

Wow, i got the issue on safari and Firefox /: Please someone put this in the next version.

EDIT :
Hey ! i found something curious. I'm creating my selects options from an ajax request, then rebuild the select.

I found that if there is no 'disabled selected' stuff on build, the problem doesn't occur. Does anyone have any idea about this ?

[ammichael]

I'm using Materialize with Angular, and @Thanood solutions worked fine for me:

$('select').on('change', function(e) {
          var selected = e.currentTarget.selectedOptions[0].value;
          $scope.obj.key = selected
});

[jarodium]

I'm not using any framework besides jQuery.
I have solved the issue by issuing $('select').material_select() again as stated in the docs.
I use jquery to $("select").val(1) and then material_select()

I think Materialize could provide us a method to set the value or monitor the change and update it for us?

[ghost]

Good point,
TODO : Overriding .val() method so if it's for a materialized <select>, update it.
Agree ?

[SimHacker]

This is probably caused by the fact that selects often ignore user input, as described in this bug report I filed:
https://github.com/Dogfalo/materialize/issues/4098

Please re-open that issue, and mark this as a duplicate. I described and fixed an input event tracking problem that causes select menus to ignore the item you select, if you don't click on it very quickly, or if you press down and drag.

To demonstrate this, try popping up the menu by clicking (because pressing and dragging does not work, and starts a text selection gesture, which is another bug), then point at an item different than the currently selected item, then click very quickly. If you click quickly enough, it works. Then try clicking on another item than the one you just selected, but more slowly so you're holding the button or finger down for about half a second to a second. (Not a press-and-hold gesture, which is slower, but just a slow click, which is very common for people to do.) Notice that the menu pops down at the instant you press down on the button or touch the screen, but the onclick handler that reports the selected item is never called. That is the bug I reported and fixed, but it was closed unfortunately because the developers don't see it as a bug. But it certainly is.

[Dogfalo]

It sounds like @Thanood may be right in that we are not firing the browser onchange event properly. Will look into this.

[ghost]

I agree, I use brython and listen on the select elements onchange event, which does not get fired since I put materialize select inputs into the page. Using "browser-default" works though. My use case requires that I can listen on select inputs onchange event, and that I can add options to select boxes dynamically. It would be great if materialize did these, thanks.

[doubleOrt]

So, i have the same problem. It is weird that this issue is still open after more than one year.

[tomscholz]

Duplicate of #4562