How to make button in OverflowSet execute? - office-ui-fabric

Question

How do I get a button in Office ui fabric's OverflowSet do something.
The example from https://developer.microsoft.com/en-us/fabric#/components/overflowset has the onClick event which never fires.
import * as React from 'react';
import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
import { IOverflowSetItemProps, OverflowSet } from 'office-ui-fabric-react/lib/OverflowSet';
import * as stylesImport from './OverflowSet.Example.scss';
const styles: any = stylesImport;
export class OverflowSetCustomExample extends BaseComponent<any, any> {
public render(): JSX.Element {
return (
<OverflowSet
items={[
{
key: 'upload',
name: 'Upload',
icon: 'Upload',
onClick: () => {
console.log("this never happens");
}
}
]}
overflowItems={[]}
onRenderOverflowButton={this._onRenderOverflowButton}
onRenderItem={this._onRenderItem}
/>
);
}
private _onRenderItem(item: IOverflowSetItemProps): JSX.Element {
if (item.onRender) {
return item.onRender(item);
}
return <CommandBarButton iconProps={{ iconName: item.icon }} menuProps={item.subMenuProps} text={item.name} />;
}
private _onRenderOverflowButton(overflowItems: any[] | undefined): JSX.Element {
return (
<CommandBarButton className={css(styles.overflowButton)} menuIconProps={{ iconName: 'More' }} menuProps={{ items: overflowItems! }} />
);
}
}
the click event never fires. How do I use the button?

Answer 1

Since you are providing an onRenderItem callback, you are taking over the component’s default render method. Therefore, you have to apply the onClick prop yourself directly:
private _onRenderItem(item: IOverflowSetItemProps): JSX.Element {
if (item.onRender) {
return item.onRender(item);
}
//
// this now returns the button with the onClick handler applied
//
return <CommandBarButton onClick={item.onClick} iconProps={{ iconName: item.icon }} menuProps={item.subMenuProps} text={item.name} />;
}