Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AutoComplete] with <MenuItem disabled={true}> gives error about disableFocusRipple prop #5131

Closed
kierenj opened this issue Sep 4, 2016 · 5 comments
Labels
component: autocomplete This is the name of the generic UI component, not the React module!

Comments

@kierenj
Copy link

kierenj commented Sep 4, 2016

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
@v3rron
Copy link

v3rron commented Sep 12, 2016

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

@kierenj
Copy link
Author

kierenj commented Sep 16, 2016

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

@oliviertassinari oliviertassinari changed the title AutoComplete with <MenuItem disabled={true}> gives error about disableFocusRipple prop [AutoComplete] with <MenuItem disabled={true}> gives error about disableFocusRipple prop Sep 18, 2016
@v3rron
Copy link

v3rron commented Nov 13, 2016

any update on this?

@kierenj
Copy link
Author

kierenj commented Jan 7, 2017

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

@oliviertassinari
Copy link
Member

Closed by #4783

@oliviertassinari oliviertassinari added the component: autocomplete This is the name of the generic UI component, not the React module! label Apr 29, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

3 participants