SelectField default value display issue

[sir4ur0n]

Hi,

When testing the SelectField example, I don't get the same display.

<Field
            name="driver"
            component={SelectField}
            hintText="Driver"
            floatingLabelText="Driver">
            <MenuItem value="alice@redux-pizza.com" primaryText="Alice"/>
            <MenuItem value="bob@redux-pizza.com" primaryText="Bob"/>
            <MenuItem value="carl@redux-pizza.com" primaryText="Carl"/>
</Field>

The first option's primaryText and the floatingLabelText overlap:

Using
"redux-form": "6.0.0-rc.4",
"redux-form-material-ui": "4.0.1"

Am I the only one?

[erikras]

Hmm... I'm not seeing that on the live demo. You are seeing it when running the example locally in development mode?

[itaylorweb]

I get the same.
Looks like an issue with Material-UI 0.15.3. See the Material-UI Select Field Floating label example: http://www.material-ui.com/#/components/select-field

see: mui/material-ui#4891

If you want a value to be selected you could initialize the form with just the driver field which appears to correct the floating label.

[erikras]

Okay, so it sounds like the problem is for Material UI to solve.

Thanks, @itaylorweb.

[sir4ur0n]

You are right @itaylorweb it seems related to mui/material-ui#2446

[m2mathew]

This issue is fixed in MUI v0.15.4, released yesterday.
https://github.com/callemall/material-ui/releases/tag/v0.15.4