Material-ui: [SelectField] not showing value

[rustanacexd]

Problem description

SelectField not showing value

Steps to reproduce

I am just using regular selectField

<SelectField
                onChange={field.input.onChange}
                value={field.input.value}
                name={field.input.name}
            >
                {field.input.categories.map((category, index) => (
                    <MenuItem key={index} value={category} primaryText={category}/>
                ))}
          </SelectField>

Versions

• Material-UI: 0.15.2
• React: 15.2.0
• Browser: Google Chrome Version 52.0.2743.116
  

  Description

Images & references

http://take.ms/Bc6Zm

-->

[monkeymonk]

Same here after updating to 0.15.4 (previously on 0.15.3).

[monkeymonk]

It's working with "material-ui": "^0.15.0-beta.2" and "react": "^15.3.0"

[vlamitin]

same problem with react ^15.4.1, material-ui: ^0.16.4

[hughkolias]

hey @vlamitin - i'm using the same set up and it is working. Make sure that your menu-items values are equal to the value of the selectfield. I.e.:

value={this.state.value}
>

 <MenuItem value={THIS_VALUE_SHOULD_EQUAL_THIS.STATE.VALUE} primaryText="whatever you want to be displayed in the box" />

Hope that helps in your debugging

[vlamitin]

thanks, @hughkolias, it worked
problem was with MenuItem's, having Date obj, computed dinamically as its values
so, with every re-render they had unique Dates
I guess, SelectField rememebers first-render values, and uses them for checking equality

[marutha]

I am having the same problem, Atleast according to docs "value" is "any" so both for selectField and MenuItem have both same values, I use value._id and value.text and I want to render value.text during the initialization as default value.
The field is working when I select the options, but not for the FIRST time after loading, Is it mandatory that I always have to use state and manage state rather than props?

[oliviertassinari]

We have been porting the component on the v1-beta branch. We reimplemented it from the ground-up. While we haven't tested it, I think that the issue is most likely fixed on that branch. Hence, I'm closing it.
Still, we will accept PR fixes until v1-beta takes over the master branch.

[MehmetKaplan]

Just in case somebody else may fall in this swirl; I'd suggest assigning the values in SelectField and MenuItem carefully such that their types match.

In my case I knew that my values in MenuItem's were integer so I casted related value in SelectField to integer as:

<SelectField
    ...
    value={parseInt(this.state.home_country_value)}
    ...
>

[RaulTsc]

Not working in material ui 1 unfortunately, do you guys know if there is any workaround?

[timothystewart6]

This still seems to be an issue. If someone stumbles upon this like I did, create a class method to render the items then call that method inside of the <Select>

  renderMenuItems () {
    return this.props.categories.map((cat, i) => (
      <MenuItem key={cat.id} value={cat.value}>{cat.name}</MenuItem>
    ))
  }

then

  <Select
            value={this.state.category}
            onChange={this.handleChange}
            inputProps={{
              name: 'category',
              id: 'category-name',
            }}
          >
            {this.renderMenuItems()}
          </Select>

then handle change:

  handleChange = (event) => {
    this.setState({ category: event.target.value })
  };

[Syndesi]

And I just found out that this component can have problems with undefined/null. Therefore I replaced those cases with an empty string and it worked without further problems :)

[maulikdhameliya]

And I just found out that this component can have problems with undefined/null. Therefore I replaced those cases with an empty string and it worked without further problems :)

Yes we need to make sure that Select should never set value undefined/null in any of cases