[AutoComplete] with <MenuItem disabled={true}> gives error about disableFocusRipple prop #5131
Labels
component: autocomplete
This is the name of the generic UI component, not the React module!
Problem description
Using an AutoComplete whose datasource has an item as follows...
{ text: '', value: <MenuItem disabled={true} primaryText='No results found.'/> }
...the item is correctly displayed, and not selectable, but the following is thrown:
Note, the filter is disabled and dataSource is filtered based on the search text, via API call.
I believe the error is caused by a combination of the cloning happening here, where
disableFocusRipple
is passed to theMenuItem
: https://github.com/callemall/material-ui/blob/master/src/AutoComplete/AutoComplete.js#L431...it's then passed to the
ListItem
: https://github.com/callemall/material-ui/blob/master/src/MenuItem/MenuItem.js#L292...before finally being passed to the
<div/>
in the case ofdisabled==true
here: https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L364I believe the fix is to:
disableFocusRipple
prop here: https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L496disableFocusRipple
to the docs forListItem
(with a note about only applying if not disabled)EnhancedButton
here: https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L652If that all sounds correct and complete, let me know and I'll try my hand at a PR. Thanks :)
Steps to reproduce
As above
Versions
The text was updated successfully, but these errors were encountered: