getSelectedValues only return previous clicked values

[weasteam]

Expected Behavior

https://materializecss.com/select.html Say we have 3 options as described in the above link. Here are my actions and return value

# Click	Option clicked	Expected value	return from instance.getSelectedValues()	return from e.target.value
1	Option 1	Option 1	``	Option 1
2	Option 2	Option 2	Option 1	Option 2
3	Option 3	Option 3	Option 2	Option 3
4	Option 1	Option 1	Option 3	Option 1

When instance.getSelectedValues() is called, it always return previous clicked values.

It should return the current clicked value

Current Behavior

See the return from column 4

Steps to Reproduce (for bugs)

Add the below code to the select onChange

        console.log(instance.getSelectedValues());
        console.log(e.target.value);

Context

Your Environment

• Version used: v1.0.0
• Browser Name and version: Chrome
• Operating System and version (desktop or mobile): Mac desktop

[weasteam]

if multiple is provided, getSelectedValues () works correctly.

[earwole1]

This is still an issue for me on Firefox as well. And as @weasteam mentioned, multiple seems to work but obviously defeats the purpose when multiple isn't wanted.

It appears that _setSelectedState() is not being called at the appropriate time.

For instance, if you call instance._setSelectedState() before instance.getSelectedValues(), then the correct value is returned as expected.

[jlires]

Same problem still. Is there any workaround to get it working without using multiple? I guess I could parse the values generated by the instance in options to get the originals (the ones I set), but it doesn't seem clean.

[earwole1]

Same problem still. Is there any workaround to get it working without using multiple? I guess I could parse the values generated by the instance in options to get the originals (the ones I set), but it doesn't seem clean.

See above: if you call instance._setSelectedState() before instance.getSelectedValues() then the correct value is returned, even when not using multiple.

[doughballs]

I found a fix for this on Stack Overflow. It's pretty dirty. Are you ready?

document.addEventListener('DOMContentLoaded', function() {
  
    var elems = document.querySelectorAll('select');
  
    var options = {
      classes:'beatles-select',
      dropdownOptions:{
        onCloseStart:function(){
          instances = M.FormSelect.init(elems,options); // Bugfix
          console.log(instances[0].getSelectedValues());       
        }
      }
    }
    
    var instances = M.FormSelect.init(elems,options);
  
  });

https://codepen.io/doughballs/pen/yLeNMyM

So, re-initialising every time we select, which I guess is pretty much the same as calling _setSelectedState()

[solroi]

Same problem still. Is there any workaround to get it working without using multiple? I guess I could parse the values generated by the instance in options to get the originals (the ones I set), but it doesn't seem clean.

See above: if you call instance._setSelectedState() before instance.getSelectedValues() then the correct value is returned, even when not using multiple.

I get:

<a class='gotoLine' href='#67:29'>67:29</a> Uncaught TypeError: instance._setSelectedState is not a function

Any idea why?