Material-ui: [AutoComplete] innerDivStyle not being passed down to MenuItem children

[marcacyr]

Description

Looking at this line in the AutoComplete code, it reads as though not all props are being passed down from AutoComplete at the highest level to its lower-level children. Specifically, one cannot pass in a prop for innerDivStyle to, for example, try to change the font size inside of the MenuItem(s) in the Menu in the AutoComplete.

Images & references

Recommended Solution

From looking at the code, it seems as though the styles for those MenuItem(s) should be combining the innerDivStyle prop, if passed in by the user, with styles.innerDiv.

I've been using the library for awhile (huge thank you for supporting it so thoroughly!), but that doesn't mean I haven't missed something. I have checked the GH issues, SO, and other resources and haven't found anyone dealing with this specifically yet. If this is already supported, would be great to know what the usage is. Specific use case:

Using an AutoComplete, but want to change the font-size of the MenuItems in the popover menu that comes with AutoComplete.

Thanks!

Versions

• Material-UI: 15.4.0 (but pretty sure this is present in most recent 16.0
• React: 15.3.2
• Browser: Chrome

[antoinerousseau]

I was about to make a PR for this issue, but I just found out how to proceed: you must use the menuProps prop to pass down props to the <Menu> component, in this case menuItemStyle. Example:

<AutoComplete menuProps={{menuItemStyle: {color: 'red'}}}>

[mbrookes]

@antoinerousseau Thanks!

[marcacyr]

Thanks @antoinerousseau!! That was not immediately obvious, but very glad the usage is simple! Many thanks!

[montoya332]

@nsuthar0914 @marcacyr @antoinerousseau

Try adding the style to MenuItem

<AutoComplete style={styles.filterSearch} inputStyle={styles.filterSearchText} dataSource={questions.questions ? questions.questions.map((q,i) => { return { value: <MenuItem style={ {wordWrap: 'break-word',whiteSpace: 'initial'}} value={q.id} key={i} primaryText={q.name}/>, text: q.name }; }) : []}/>

[kendallroth]

I've come across this issue now in several use cases and was wondering if it would be possible to expose the innerDivStyle from the AutoComplete menuProps, specifically for the use case of text overflow and adding an ellipsis. I realize that there is a "solution" above but in my opinion having to manually pass in a list of MenuItem components is a lot of extra work for what should be a simple property? Correct me if I'm wrong, but I can definitely see this being useful. Thanks!