[SelectField] label bug

[cezarsmpio]

My code:

<SelectField
  hintText="Select the bicycle"
  menuItems={[
    { payload: 0, text: 'Bike 01' },
    { payload: 1, text: 'Bike 02' },
    { payload: 2, text: 'Bike 03' },
    { payload: 3, text: 'Bike 04' },
  ]}
/>

[justjacksonn]

You beat me to it.. I'd like to add..that in my case changing the selection does NOT remove the hint text.

[oliviertassinari]

What version are you using? It seems that the issue is not present in the master branch.

[cezarsmpio]

"material-ui": "^0.13.4"

[oliviertassinari]

Could you try the master branch? This might be fixed.

[cezarsmpio]

Use "0.14.0-rc1"?

[oliviertassinari]

I would say master, we have recently changed the implementation of the SelectField.

[cezarsmpio]

Hi @oliviertassinari, I'm using 0.14.0-rc1 (npm version) and the problem wasn't fixed.

[alitaheri]

@CezarLuiz0 Please wait for 0.14.0-rc2 and try again with that.

[bendiy]

See: #1427 (comment)
Make sure when onChange is set, value is also set. That might be related.

[alitaheri]

@CezarLuiz0 Is this fixed with the 0.14.0-rc2 or rather, master?

[oliviertassinari]

I have just tried the examples of @CezarLuiz0 with the master branch. It's working correctly.

<SelectField
  hintText="Select the bicycle"
  menuItems={[
    { payload: 0, text: 'Bike 01' },
    { payload: 1, text: 'Bike 02' },
    { payload: 2, text: 'Bike 03' },
    { payload: 3, text: 'Bike 04' },
  ]}
/>

[cezarsmpio]

Using 0.14.0-rc2 with npm, It was not fixed. Same problem here.

I will try use the master.

[cezarsmpio]

Using npm install material-ui --save, the npm installed the version 0.13.4, same issue here.

-- edited

Using rc2

[oliviertassinari]

@CezarLuiz0 Can you share the SelectField source code?

[cezarsmpio]

Sure!

    <SelectField
      hintText="Selecionar a bike"
      menuItems={[
        { payload: 0, text: 'Bike 01' },
        { payload: 1, text: 'Bike 02' },
        { payload: 2, text: 'Bike 03' },
        { payload: 3, text: 'Bike 04' },
      ]}
      fullWidth
    />

[oliviertassinari]

Thanks, here is what I have:

How to you reflect the change of what the user is selecting?

[cezarsmpio]

See my gif above, the selected item by the user changed, but for you, SelectField doesn't changed. My main problem is the label on the item and when I select an item, It doesn't get the selected color.

In documentation, SelectField works fine 😕

[oliviertassinari]

I'm using the same source code than you. The result is completly different.
I don't understand, that must be on your side. Make sure your material-ui is currently installed.

[cezarsmpio]

Look my dependencies:

"dependencies": {
    "alt": "^0.18.0",
    "classnames": "^2.2.1",
    "flexboxgrid": "^6.3.0",
    "history": "^1.13.1",
    "lodash": "^3.10.1",
    "material-ui": "^0.14.0-rc2",
    "normalize.css": "^3.0.3",
    "react": "^0.14.0",
    "react-addons-css-transition-group": "^0.14.3",
    "react-addons-test-utils": "^0.14.0",
    "react-dom": "^0.14.0",
    "react-notification-system": "^0.2.6",
    "react-router": "^1.0.2",
    "react-tap-event-plugin": "^0.2.1",
    "react-toolbox": "^0.13.4",
    "rest-mapper": "^1.2.2"
  }

[oliviertassinari]

Let's see what we have with 0.14.0-rc2:

So you were right 👍.

Still, this is what we have on the master branch:

Looks like the issue was solved 😄 .

[alitaheri]

We'll release 0.14.0 very soon 😁 Check back after the release and see if it's fixed

@oliviertassinari Thanks for the confirmation 👍 👍

[rdagger]

I'm using 0.14.0 and I had a lot of trouble getting the SelectField to work. I was having the same problem with the label above. Here is an example of how I fixed it:

getInitialState(){
    return {
        selectValue: ''
    };
},

render() {
    const cats = ['Maine Coon','Siamese','Abyssinian','Sphynx','Himalayan','Bengal'];
    let categories = _.map(cats, function(cat, idx){ 
        return <MenuItem value={cat} key={idx} primaryText={cat}/>
        });
    return (
        <SelectField
            value={this.state.selectValue}
            onChange={this._handleSelectValueChange}
            floatingLabelText="Category">
            {categories}
        </SelectField>
    )
},

_handleSelectValueChange(event, index, value){
    this.setState({selectValue: value});
},

Key is necessary or else you get console warnings. PrimaryText is what is displayed in the DropDown. Value is necessary to avoid the label bug and make the field operate properly.
I'm not sure if this is the best practice. It is just what I figured out by trial and error.

Also, floatingLabelText and hintText cannot be used at the same time.

[alitaheri]

@rdagger Thanks for the code example. Yeah I can confirm this issue. We'll try to look into it as soon as we can.

[rwoody]

@rdagger @alitaheri

Can confirm floatingLabelText and hintText cannot be used in conjunction. When I try, the floatingLabelText is displayed where the hintText would normally go, but clicking on it does nothing.

[cezarsmpio]

Any solution? I'm using version 0.14.2 and the issue wasn't fixed.

Thanks!

[cezarsmpio]

Hi guys, I'm using version 0.14.2:

My component:

<SelectField
  floatingLabelText="Categoria"
  onChange={this.changeCategory}
  required
  fullWidth
>
  <MenuItem value={1} key={1} primaryText="Urbano" />
  <MenuItem value={2} key={2} primaryText="Ciclismo" />
  <MenuItem value={3} key={3} primaryText="Mountain Bike" />
</SelectField>

Any solution for this? Thanks guys!

[oliviertassinari]

@cezarlz A workaround is to provide a value property, have a look at the examples of the documentation. But that's definitely bug.

[cezarsmpio]

Thanks! Is resolving my problem for while.

[tintin1343]

@oliviertassinari : This is still happening on the docs website as well.

[nehalbhanushali]

any progress with this yet?

[oliviertassinari]

As far as I have investigated, this issue is pretty related to #4275.

[MadeInMoon]

@oliviertassinari
I still experiment this bug, without any link to #4275: looking the MenuItem values, there is no "null, undefined or empty values".
The problem happens when no SelectField value is given (still happens with [email protected] & [email protected]).

Component

        <SelectField               
          hintText  = {this.props.hintText}
          onChange  = {this.props.onChange}
          value  = {this.props.value}>

            {this.props.menuItems.map((item, i)=>{
               return <MenuItem key={i} value={'value'+i} primaryText={'primaryText'+1} label={'label'+i}/>
            })}

        </SelectField>  

---

2 Fixes possible

• hintStyle

        <SelectField hintStyle = {{backgroundColor: '#ffffff', zIndex: 1, pointerEvents: 'none',  width: '85%'}}/>

• CSS

Give a className

    <SelectField className="select" ... />

Target the hintText and add the following style

    .select{
      > div:first-child{
        background: white !important;          // same color as your page
        z-index: 1;                            // goes on top
        pointer-events: none;                  // don't block the click
        width: 85%,                            // be larger than the primaryTexts behind, but do not cover the little arraw on the right
      }
    }

[jon-peel]

I am having this problem with version 1.3.0