Material-ui: [AutoComplete] with <MenuItem disabled={true}> gives error about disableFocusRipple prop

Created on 4 Sep 2016  路  5Comments  路  Source: mui-org/material-ui

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:

Warning: Unknown prop `disableFocusRipple` on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop
    in div (created by ListItem)
    in div (created by ListItem)
    in ListItem (created by MenuItem)
    in MenuItem (created by MyThingyHere)
    in div (created by List)
    in List (created by Menu)
    in div (created by Menu)
    in ClickAwayListener (created by Menu)
    in Menu (created by AutoComplete)

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 the MenuItem: 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 of disabled==true here: https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L364

I believe the fix is to:

  1. "Grab" the disableFocusRipple prop here: https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L496
  2. Add disableFocusRipple to the docs for ListItem (with a note about only applying if not disabled)
  3. Pass the prop through to the EnhancedButton here: https://github.com/callemall/material-ui/blob/master/src/List/ListItem.js#L652

If 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

  • Material-UI: 0.15.4
  • React: 15.3.0
  • Browser: Google Chrome 52.0.2743.116
Autocomplete

Most helpful comment

Still happy to help fix if my outlined approach was good..

All 5 comments

Just encountered exactly the same issue with AutoComplete and disabled MenuItem.

My offer to fix this is still there, just looking for some confirmation of approach from a developer on the project..

any update on this?

Still happy to help fix if my outlined approach was good..

Closed by #4783

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ericraffin picture ericraffin  路  3Comments

sys13 picture sys13  路  3Comments

rbozan picture rbozan  路  3Comments

chris-hinds picture chris-hinds  路  3Comments

iamzhouyi picture iamzhouyi  路  3Comments