Unknown props - react and material-ui

Question

Currently I'm using react and material-ui and I've the following code in my component.

<Dialog
    title="Dialog With Actions"
    actions={actions}
    modal={false}
    open={this.state.open}
    onRequestClose={this.handleClose}>
      Are you sure that you want to proceed?
  </Dialog>

I've imported

import React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';

But I'm always getting the following error message

Warning: Unknown prop `onKeyboardFocus` on <button> tag. Remove this prop from the element.
Warning: Unknown prop `keyboardFocused` on <button> tag. Remove this prop from the element.

Answer 1

Use react-tap-event-plugin to resolve this issue. After installing do this -

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

Answer 2

First, this is a warning and not an error message i.e. your code is still working. If you follow the link in the warning message, you can find out that:

The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.

There are more details and the possible reasons, but if I have to speculate you are passing all props to the button element.

Also interesting is a comment bellow the note:

For anyone who is curious/wondering why this new warning exists...

Historically, React has maintained a whitelist of all valid DOM attributes, and we would strip unrecognized attributes. This approach has a couple major downsides:

• Performance: It means we must do a check for every prop on every DOM element, to sanity check that the prop is valid, and strip the prop if it is not legal. This is silly, because the majority of elements are completely safe (no illegal attributes) and thus the checks are just wasted CPU cycles.
• The old technique forced us to maintain a huge whitelist of all possible DOM attributes. This is a pain to maintain, but more
  importantly, if we accidentally miss one or browser vendors add a new one, it means that prop can't be used until we update our whitelist
• The old technique is less flexible because it is impossible to render a non-standard attribute. While rendering non-standard attributes is not recommended (you should use a data- attribute instead), sometimes there are situations/frameworks that require it. It sucks that React previously couldn't support it.

As we move toward removing this whitelist, we need to give people an opportunity to clean up their existing apps. This way, an upgrade doesn't result in us dumping a ton of unexpected props into the DOM.

EDIT: Most probably this is coming from the jsx of the library you are using ( material-ui ) Check if you are using the latest version or if you are, they should probably address it soon