Get the key of the clicked fluent ui button menu

Question

Once again I have the confirmation the Microsoft documentation, is really poorly auto-generated with a useless content.

I have a Fluent UI, Splitbutton. Here are the poorly generated docs. And there are two options "Email message" and "Calendar event"... is not clear at all how to get the click on these items and understand what item was clicked... I tried the following codepen

const menuProps: IContextualMenuProps = {
  items: [
    {
      key: 'emailMessage',
      text: 'Email message',
      iconProps: { iconName: 'Mail' },        
    },
    {
      key: 'calendarEvent',
      text: 'Calendar event',
      iconProps: { iconName: 'Calendar' },      
    },
  ],
  onItemClick: onItemClick,      
};

function onItemClick(event){
  console.log(event.currentTarget);
}

First of all the onClick in example is on the button itself, not on the menu items without any suggestion how to get them. Finally, after some researches, I found in another doc that it needs probably to have a onItemClick in the Props... undocumented, but then, also what is the type of this event and how to get the item key?

score 0 · Accepted Answer · answered Oct 05 '22 at 13:49

0

Completely by chance found an example on a non-ms related site, cause that is completely missing from the docs:

function onItemClick(event, item){
  console.log(item.key);
}

answered Oct 05 '22 at 13:49

serge

13,940
35
121
205

score 0 · Answer 2 · answered Oct 26 '22 at 13:09

0

For the sake of completeness. There is even a whole documentation page just for the ContextualMenu, where the complete IContextualMenuProps interface is described along with some examples.

There you can see the type of onItemClick:

(ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: IContextualMenuItem) => boolean | void

If you take a closer look at the Button documentation you mentioned before, there is also a link to the said documentation under Implementation -> IButtonProps interface -> menuProps

answered Oct 26 '22 at 13:09

Thomas

176
1
4

and how is linked the Contextual Menu with the buttons on the SplitButton? – serge Oct 26 '22 at 13:14
That's described also right at the menuProps in the IButtonProps interface: _Props for button menu. Providing this will default to showing the menu icon. See menuIconProps for overriding how the default icon looks. Providing this in addition to onClick and setting the split property to true will render a SplitButton._ They are linked by the fact, that the context menu which opens at the split button is a _ContextualMenu_ – Thomas Oct 26 '22 at 13:30
"Providing this in addition to onClick and setting the split property to true will render a SplitButton" for me that is not clear what to do to get a onClick on a button... there is any example provided. – serge Oct 26 '22 at 13:49

Get the key of the clicked fluent ui button menu

2 Answers2