Materialize: Select menu value not changing correctly

[mikimouse77]

https://codepen.io/anon/pen/VbaKpJ

You can use var number for debugging and check values when change event occurs.
Changing from First option to Third option shows value 1. There are times when value is showed correctly, but not so often.

[DanielRuf]

Not sure what you mean, this works https://codepen.io/anon/pen/zwqdgX

[mikimouse77]

Okay, I should have pointed that I was testing this in Firefox. I don't have issue in Chrome, but Firefox got one.

[DanielRuf]

Also with the other codepen? Which Firefox version?

[mikimouse77]

Firefox 53.0 (32-bit) (updated today), and yes also with the other codepen. After loading codepen, changing value from default to "Second", console outputs value 1 and after changing from "Second" to "Third" console outputs value 2.

[DanielRuf]

I see it now and will find a solution

[mikimouse77]

If it helps, text value of select menu(not select tag which is hidden) created by materialize has corresponding value, like "First".

[DanielRuf]

Please test the change from the PR (also applied here).

[DanielRuf]

Can you please also try each of the following and let me know which work and wich do not work.

$select.find('option').eq(i).selected = true;
$select.find('option')[i].selected = true;
$select.val($select.find('option').eq(i).val());

Might be a bit better than the fix in the PR.

[mikimouse77]

I have tested codepen and it's working, except on the first change, on the first change it will always show value 1.
I'm not sure how should I test those lines you wrote.

[DanielRuf]

Fork the codepen, search for $select.prop('selectedIndex', i); in the js tab and replace it with the first line, test it, then with the second line test it and then the third line and test this too.

Weird, why does Firefox handle this differently?

[DanielRuf]

You can make a gist at https://gist.github.com and create a js file using https://rawgit.com and add it in the settings in the js tab at codepen.

I think I fixed it.

[DanielRuf]

Please test this codepen: https://codepen.io/anon/pen/LyNvdv

Check the console if the values are now right.

[kmmbvnr]

@DanielRuf the fix works fine for me

[mikimouse77]

This code pen works with the next line: $select.val($select.find('option').eq(i).val());

Last codepen you have posted is working also, but it's showing 2 options of "Choose your option" and console is outputting 2 values in 2 rows. eg. if I change to "Second" it will output >2 and >2.

[DanielRuf]

Last codepen you have posted is working also, but it's showing 2 options of "Choose your option" and console is outputting 2 values in 2 rows. eg. if I change to "Second" it will output >2 and >2.

Fixed, just had duplicated the code / forgot to remove it in the JS tab.

[DanielRuf]

You can see here what I did ;-)

[mikimouse77]

Okay, that's fixed now I guess :D

[acburst]

This is not reproducible on firefox for me. Heres my updated codepen: https://codepen.io/anon/pen/VWgwPG

[DanielRuf]

@acburst take a look at the console output of https://github.com/Dogfalo/materialize/issues/4562#issuecomment-295808037