Currently, I am working with the Material-UI react library to create Dropdown menus by utilizing components like <FormControl>, <Select>, and <MenuItem>. The options array for these dropdown menus is quite extensive, and I am looking to set a maximum height on the dropdown to prevent it from becoming too large. However, I am facing some challenges in accomplishing this.
Here is a snippet of the basic dropdown setup using Material-UI:
const MenuValidNotes = ({
schedule,
indexTrack,
indexSchedule,
actionSetTrackScheduleItemNote,
}) => {
const listNotesMenu = () => (
ARRAY_VALID_NOTES.map((noteObj, i) => (
<MenuItem
value={noteObj.note}
key={`track-item-${indexTrack}-schedule-${indexSchedule}-note-${i}`}
onClick={() => actionSetTrackScheduleItemNote(indexTrack, indexSchedule, noteObj.midiNumber)}
>{noteObj.note}</MenuItem>
))
)
return(
<div>
<FormControl>
<InputLabel>Note</InputLabel>
<Select
defaultValue={noteValueToNoteObject(schedule.noteValue).note}
>
{listNotesMenu()}
</Select>
</FormControl>
</div>
)
}
While attempting to set the max-height, one solution that I found was to wrap the children of the <Select> component in a div element, assign a classname to it, and apply CSS styles. However, due to the requirements of the <Select> component, enclosing its children within a <div> breaks the 'value' attribute, causing the displayed value to be incorrect.
const listNotesMenu = () => (
ARRAY_VALID_NOTES.map((noteObj, i) => (
<div className="..."> // the div wrapper interferes with the 'value' attribute of the Select component
<MenuItem ... />
</div>
))
)
Thus, my goal is to have control over both the value and the maximum height of the children within the dropdown menu. Is it feasible to achieve this? Unfortunately, the Material-UI documentation lacks examples demonstrating this functionality, and the props list of the <Select component does not include any properties for controlling height. Any assistance in resolving this issue would be greatly appreciated.
(The provided screenshots illustrate the problem at hand: one demonstrates how setting max-height using a div wrapper disrupts the value, while the other depicts the dropdown without the wrapper, rendering the max-height unattainable).
https://i.sstatic.net/GetP5.png