Material-ui: Error with more than one IconButton in ListItem

[andycodesstuff]

Unknown prop onKeyboardFocus on <div> tag

Reproducing the issue

...
<List>
<ListItem
  primaryText='Test ListItem'
  secondaryText='hello'
  rightIconButton={
    <div style={{ display: 'flex', flexDirection: 'row' }}>
      <IconButton>
        <ActionInfoOutline />
      </IconButton>

      <IconButton>
        <ImageEdit />
      </IconButton>

      <IconButton>
        <ActionDelete />
      </IconButton>
    </div>
  } />
</List>
...

I need to use a ListItem with 3 IconButtons but it gives me this error:
Warning: Unknown prop onKeyboardFocus on <div> tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

Despite the error, I can click IconButtons and everything works as expected.
I'd like to know why this error is happening and how to fix that and also why adding more than one IconButton isn't supported yet by material-ui

Versions

• Material-UI: 0.16.7
• React: 15.4.2
• Browser: Chrome 64Bit 55.0.2883.87

[ArcanisCz]

There is error, because the thing you used is a bit of workaround. Property says rightIconButton, which means you should provide some button, not div (see the docu) - author clearly intended to have onle one button supported - if not, this property would have been named lůike rightIconButtons or rightIconButtonBar.

So, when you provide some div, it says error beacaue component wants to set some properties, which divs dont have (onKeyboardFocus). But, since its normal component, individual children onClick etc works.

If you want proper way to handle this, author should add support for it in proper way, which will be used in way shown below, without div. But, it depends, because limitation to one button could make sense for example for styling purposes.

...
<List>
<ListItem
  primaryText='Test ListItem'
  secondaryText='hello'
  rightIconButtons={[
      <IconButton>
        <ActionInfoOutline />
      </IconButton>
    ],[
      <IconButton>
        <ImageEdit />
      </IconButton>
    ],[    
      <IconButton>
        <ActionDelete />
      </IconButton>
    </div>
    ]} />
</List>
...

[mbrookes]

As @ArcanisCz kindly described - this isn't an error, you're just not using it as intended. Closing for now.

[krepecka]

Is there any known workarounds for this issue ?

[MatanBobi]

Is this supposed to be implemented?

[pawelangelow]

@krepecka Try to wrap elements in new component:
function Wrapper ({properties used for rendering}) { return ( <div> Cool stuff </div> ); }
Not very cool, probably you'll need to put some styling, but it works.

[andycodesstuff]

I think that this is supposed to be included in the default API, maybe a pull request?

[muscaiu]

@pawelangelow that doesn't help. The error is the same.