Make Select use same height/lineHeight/vertical padding as Input to fix bad alignment

When I customized the fontSize of my Inputs, side-by-side Select and TextField components became vertically misaligned by one pixel:

The JSS for Select overrides the height, lineHeight, paddingTop, and paddingBottom of the input-singleLine class, wrecking the vertical alignment. It seems to me all of the vertical sizing properties should match.

I will create a PR in a moment.

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

Expected Behavior

Select has same height, lineHeight, and vertical padding as Input by default.

Current Behavior

Steps to Reproduce (for bugs)

Customize Input fontSize:

theme.overrides = {
  MuiInput: {
    root: {
      fontSize: theme.typography.pxToRem(20),
    },
  },
}

Render a Select and a TextField side-by-side:

<table>
  <tbody>
    <tr>
      <td>
        <Select value="default">
          <MenuItem value="default">Select</MenuItem>
        <Select>
      </td>
      <td>
         <TextField placeholder="TextField" />
      </td>
    <tr>
  </tbody>
</table>

Workaround

Use the following theme override:

  MuiSelect: {
    // see https://github.com/mui-org/material-ui/issues/9826
    select: {
      padding: undefined,
      paddingRight: theme.spacing.unit * 4,
      height: undefined,
    },
    selectMenu: {
      lineHeight: undefined,
    },
  },

Context

Your Environment

Tech	Version
Material-UI	1.0.0-beta.25
React	16.2.0
browser	Chrome 63.0.3239.132

[petrdsvoboda]

I have this issue too, but with Simple Select. I haven’t tried Native Select.

I have tried this on Chrome 67, Firefox 61 and in Code Sandbox. I managed to encounter different amounts of misalignment.

Setting margin to FormControl helps, but it doesn’t work on Firefox and there’s still 1px gap on Chrome. Also setting value to the fields helps sometimes.

Chrome (not perfectly aligned)

Firefox

CodeSandbox

[iamolivinius]

Just updated to FF 60.0.2. Still an issue