title: Material-UI - Apply max-height to Select children
body: <p>I am using the Material-UI react library to render some Dropdown menus, using the <code>&lt;FormControl&gt;</code>, <code>&lt;Select&gt;</code> and <code>&lt;MenuItem&gt;</code> components. The options array for this dropdown menu is quite large, and I would like to set a max-height on the dropdown, so it does not become to large. I am currently struggling to do this, as I will explain below.</p>
  <p>basic dropdown using Material-UI:</p>
  <pre><code>const MenuValidNotes = ({
    schedule,
    indexTrack,
    indexSchedule,
    actionSetTrackScheduleItemNote,
  }) =&gt; {
  
    const listNotesMenu = () =&gt; (
      ARRAY_VALID_NOTES.map((noteObj, i) =&gt; (
        &lt;MenuItem
          value={noteObj.note}
          key={`track-item-${indexTrack}-schedule-${indexSchedule}-note-${i}`}
          onClick={() =&gt; actionSetTrackScheduleItemNote(indexTrack, indexSchedule, noteObj.midiNumber)}
        &gt;{noteObj.note}&lt;/MenuItem&gt;
      ))
    )
  
    return(
      &lt;div&gt;
        &lt;FormControl&gt;
          &lt;InputLabel&gt;Note&lt;/InputLabel&gt;
          &lt;Select
            defaultValue={noteValueToNoteObject(schedule.noteValue).note}
          &gt;
            {listNotesMenu()}
          &lt;/Select&gt;
        &lt;/FormControl&gt;
      &lt;/div&gt;  
    )
  }
  </code></pre>
  <p>One way I found to set the max-height is to render the children of <code>&lt;Select&gt;</code> in a div, give it a classname and apply some CSS to it.</p>
  <p>However, the <code>&lt;Select&gt;</code> component requires that its children are <code>&lt;MenuItem&gt;s</code>, so having a <code>&lt;div&gt;</code> around will break <code>value</code> attribute, which means it would not display the correct value. (found this while reading <a href="https://stackoverflow.com/questions/58929085/material-ui-select-e-target-value-is-undefined/58931332#comment109113636_58931332">Material-UI Select e.target.value is undefined</a>)</p>
  <pre><code>  const listNotesMenu = () =&gt; (
      ARRAY_VALID_NOTES.map((noteObj, i) =&gt; (
        &lt;div className=&quot;...&quot;&gt; // this div will break the 'value' of the Select component 
           &lt;MenuItem ... /&gt;
        &lt;/div&gt;
      ))
    )
  </code></pre>
  <p>so, ideally, I would like to be able to control both the  value and the max-height of its children. Is this possible at all? The Material-UI docs on select have no such example, and the props list of the <code>&lt;Select</code> component does not include any fields to control the height. Thank you for your help.</p>
  <p>(The screenshots above displays this issue. one screenshot shows that it is possible to control the max-height using a div wrapper, but that breaks the value; the other shows the dropdown without the div wrapper, which means we can't set max-height).</p>
  <p><a href="https://i.stack.imgur.com/GetP5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GetP5.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/F3zn5.png" rel="noreferrer"><img src="https://i.stack.imgur.com/F3zn5.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/GndYF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GndYF.png" alt="enter image description here" /></a></p>