select-field incorrectly displays floatingLabelText

[martinhoefling]

Rendering sth. like:

            <SelectField
                floatingLabelText='Client'
                style={{ width: '100px' }}
                menuItems={clientMenuItems}
                selectedIndex={this.props.clients.indexOf(this.props.currentClient)}
                onChange={this.onClientChange}/>

client menu items is an array of objects with text and payload.

The floatingLabelText is only correctly placed when another item is selected and the select is focused. As soon as I focus another element. The floatingLabelText is fullsizeGray overlapping with the selected element in black / same fontsize.

material-ui version: 0.10.4

[cbioley]

For what it's worth, I've got the same problem.

Edit: Doh, I lied. Now that I restarted Meteor, I only have the overlapping issue when the field is initially shown. When I choose any items and focus out of the field, the label stays in right position.

[martinhoefling]

@cbioley, in my case after focus is lost, the label goes back to the wrong position.

[martinhoefling]

I "fixed" it in my case by adding
floatingLabelStyle={ { transform: 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)' } }
to my SelectField. What would be the proper solution in upstream? Setting this transform? Setting a value?

[manuelmazzuola]

The same for me, @martinhoefling's fix works 👍

[neverfox]

I was running into this until I set the value of the selected element explicitly through the value prop. An item will appear to be selected if you leave that out, but it's not as far as the component is concerned (i.e. triggering the rising label of the underlying text field works the same way, by making room for the value; no value, no room is made).

[cgwyllie]

+1 I am seeing this issue, and setting a value prop fixes the initial render as @neverfox describes. (material-ui 0.13.1, react 0.14.2)

[bendiy]

I've ran into this issue and it is only happening when onChange is set to a function, but a value isn't set. If I leave onChange off, the floatingLabelText floats to the top like it should when selecting an option. If I have an onChange function that also updates the state property value is using, it works correctly. Note, the floatingLabelText floats to the top initially, but when the SelectField looses focus, it drops back down.

const myMenuItemsArray = [
  {"payload": "0", "text": ""}, // Makes default empty.
  {"payload": "1", "text": "Red"},
  {"payload": "2", "text": "Green"}, 
  {"payload": "3", "text": "Blue"}
];
handelSelectFieldChange =(name, event) {
  const {dispatch, myState} = this.props;
  const fieldId = event;
  dispatch(setFieldId(fieldId, myState)); // Actiont that sets `myState.fieldId = fieldId`;
};

This works correctly, but isn't very useful:

<SelectField
  floatingLabelText="Color"
  menuItems={ myMenuItemsArray } />

This doesn't work. floatingLabelText doesn't float above the field when a color is selected. Note, no value set:

<SelectField
  floatingLabelText="Color"
  onChange={ this.handelSelectFieldChange }
  menuItems={ myMenuItemsArray } />

This does works correctly:

<SelectField
  floatingLabelText="Color"
  value={ myState.fieldId ? myState.fieldId : null} // Using `null` means it's not set, so "Color" is on the SelectField line initially. If this was set to `"0"`, instead of `null`, the floatingLabelText "Color" floats above.
  onChange={ this.handelSelectFieldChange }
  menuItems={ myMenuItemsArray } />

So this could just be a documentation issue. Make sure when onChange is set, value is also set.

[newoga]

@bendiy Thanks for writing that up. I agree with your observations. I'm actually in the middle of refactoring some of the TextField code that controls this logic at the moment. And you are correct.

The SelectField uses a TextField internally to control floating labels. The conditions in which the floating label is displayed as floating text vs as hint text is not intuitive. Unfortunately I don't think my refactoring will be able to fix this until we do #2416. I'll update this if anything changes.

[aahan96]

@newoga @martinhoefling There seems to be no new movement regarding this issue. Can we close this issue?

[martinhoefling]

@aahan96 So for me the problem is "solved" by adding value. What about #2416?

[aahan96]

@martinhoefling Closing this issue. I think work is still going on #2416

[michielreyers]

This can also be 'solved' by setting floatingLabelFixed to true