Select is not getting vertically aligned with TextFields

[wellyal]

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Select should be getting vertically aligned with TextFields

Current Behavior 😯

Select is not getting vertically aligned with TextFields

Steps to Reproduce 🕹

https://codesandbox.io/s/04npwwox1v

Tech	Version
Material-UI	v3.9.2
React	v16.6.3
Browser	chrome

[oliviertassinari]

I remember working on issues closely related to this one. The tradeoff taken was to choose a vertical alignment that is consistent between the browsers. I'm not sure we can do much about it. The simplest workaround is to use a display flex container.

In #14580 I have found that we can potentially remove a div from the select, it always helps.

[wellyal]

@oliviertassinari I'm not sure if I got this right can you edit my sandbox and show how you do the trick?

[oliviertassinari]

@wellyal Oh no, my bad. I have overlooked the topic, the fix is simple:

-<FormControl className={classes.formSelect}>
+<FormControl className={classes.formSelect} margin="normal">

If you want to keep using the same level of abstraction:

          <TextField
            label="Tipo"
            name="type"
            style={{ minWidth: 100 }}
            className={classes.textField}
            id="type"
            margin="normal"
            select
            value={formikProps.values.type}
            onChange={formikProps.handleChange}
            displayEmpty
          >
            {documentsType.map(option => (
              <MenuItem key={option.value} value={option.value}>
                {option.label}
              </MenuItem>
            ))}
          </TextField>