title: Prevent Material-UI InputLabel from moving to the upper left of Select component
body: <p>No matter what I try, I can't seem to get true Placeholder functionality for the Material-UI Select component. Using a placeholder prop on <code>&lt;Select /&gt;</code> did not work, and it looks like it's either not passing that prop to the input, or it's not displaying it somehow. </p>
  
  <p>Reading through the Material-UI demo code for the Select component, it appears they achieve Placeholder functionality by using <code>&lt;InputLabel /&gt;</code>. They have this cheeky little animation that moves it to the upper left of the input. Ok cool, it's a nice effect. But it doesn't fit with the design of our site and I'd like to disable that. Unfortunately, the <code>disableAnimation</code> prop just causes the label to jump to the upper left, not to disappear entirely.</p>
  
  <p>What I'd like is for my dropdown component to say "Select Item" as a placeholder text, then when the menu is open, that text should be gone. It only returns if the user clicks out of the dropdown without selecting anything. If they select a value, the value should replace the placeholder and "Select Item" shouldn't appear anywhere.</p>
  
  <p>(NOTE: I had this working fine when using react-select, but I need to use Material-UI's ripple effect, so I tried overriding their MenuList and MenuItem components with Material UI's, but it passed all the props down to the DOM elements and threw a bunch of errors. So I went back to the drawing board and decided to use the entire Material UI Select component.)</p>
  
  <p>Current code:</p>
  
  <pre><code>const Dropdown = ({options, ...props}) =&gt; {
    const [selected, setSelected] = useState('');
  
    const testOptions = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ];
  
    const handleChange = (selected) =&gt; {
      setSelected(selected);
      console.log('is anything happening')
    }
  
    options = options || testOptions;
  
    const menuItems = options.map((option, index) =&gt; (
        &lt;StyledMenuItem
          key={index}
          value={option.value}
          label={option.label}
        /&gt;
      ));
  
    return (
      &lt;FormControl hiddenLabel&gt;
        &lt;InputLabel disableAnimation&gt;Select Item&lt;/InputLabel&gt;
        &lt;StyledSelect
          value={selected}
          onChange={handleChange}
  
          variant="outlined"
          disableUnderline={true}
        &gt;
          &lt;MenuItem value=""&gt;
            &lt;em&gt;Select Item&lt;/em&gt;
          &lt;/MenuItem&gt;
          {menuItems}
        &lt;/StyledSelect&gt;
      &lt;/FormControl&gt;
    )
  };
  
  
  const StyledMenuItem = styled(MenuItem)`
    min-height: 32px;
    height: 32px;
    padding: 0 12px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: 17px;
    line-height: 20px;
    color: ${colors.primary800};
    outline: none;
  
    &amp;:hover {
      background-color: ${colors.primary100};
    }
  
    &amp; .MuiTouchRipple-root {
      color: ${colors.primary050};
    }
  `
  
  const StyledSelect = styled(Select)`
  
    input::-webkit-contacts-auto-fill-button,
      input::-webkit-credentials-auto-fill-button {
          display: none !important;
  }
      border: 1px solid ${colors.primary400};
      border-radius: 2px;
      height: 40px;
      box-shadow: none;
      outline: none;
  
    &amp; .MuiSelect-icon {
      fill: ${colors.primary300};
      width: 36px;
      height: 36px;
      top: inherit;
    }
  `
  </code></pre>