Material-ui: Warning: Unknown event handler property `onKeyboardFocus`. It will be ignored

Question

More detailed trace:

warning.js:33 Warning: Unknown event handler property `onKeyboardFocus`. It will be ignored.
    in div (created by IconMenu)
    in div (created by IconMenu)
    in IconMenu (created by DropdownMenu)
    in div (created by DropdownMenu)

I have an IconMenu with a an IconButtonElement prop. For some reason it keeps throwing this warning. Why? What is it?

Sample code that triggers is:

<IconMenu
    iconButtonElement={
        <div>
            <IconButton onClick={this.handleTouchTap}>
                <div >
                    <img src={require("../../settingsicon.svg")}/>
                </div>
            </IconButton>
        </div>}
    open={this.state.open}
    anchorOrigin={{horizontal: "right", vertical: "bottom"}}
    targetOrigin={{horizontal: "right", vertical: "top"}}
>
    <MenuItem
        className={someClass}
        onClick={this.handleLogOutClick}
    >
        <span className={someClass}Hello</span>
    </MenuItem>
    <Divider className={someClass}/>
    <MenuItem className={someClass}>
        <span className={someClass}>Goodbye</span>
    </MenuItem>
</IconMenu>

It's a pretty simple example almost copy-pasted from the documentation with a few functions to the menuitems, but nothing that should throw an error such as this. Even when I made a complete barebone example - it still throws the warning. It's a bit ugly to have in the console every time the page loads :)

Answer 1

IconMenu passes the onKeyboardFocus prop to the element defined in iconButtonElement, which would be fine if it were a React component (like IconButton, as the docs suggest), but the warning occurs because you’ve wrapped it in a div and onKeyboardFocus isn’t a supported DOM event (it is a property in the IconButton API).

You should remove the outer div in iconButtonElement.

onKeyboardFocus defaults to a no-op function and is passed unconditionally. Since you aren’t specifying it as a prop for IconMenu the effect will be the same if you remove the wrapping div in iconButtonElement: it’ll do nothing, but the warning will no longer occur.

If you were using the onKeyboardFocus prop, removing the div or replacing it with another component that passes this prop to its child would be the only ways to ensure that it gets to IconButton.

I wouldn’t submit an issue, as a couple have already been submitted and closed:

• #6056
• #5071