How do I get the UI Fabric Command Bar contextual Menu to work?

0
votes

I have been trying to use the Office UI Fabric's Command Bar control in Office.js API Microsoft Word application.

The buttons that are seen in the main bar all work as intended when the app is displayed in the maximum width of the task pane. When I re-size the task pane to smaller width and the buttons move into the '...' (ellipsis) drop down they stop working.

I've tried explicitly adding copies of the buttons in the code into the ms-CommandBar-overflowButton container, but it will only take the functionality of the first item and duplicates it for every other item. I've used the code from the Ui Fabric JS documentation page and I'm not sure why the buttons stop working when moved into context menu.

Office UI Fabric version: 1.2.0 Office UI Fabric Core version: 4.1.0

1
javascriptms-wordoffice-jscommandbaroffice-ui-fabric
Please add into description the version number of the Office UI Fabric JS and Office UI Fabric Core you are using with your app. – Slava Ivanov
The current version of Office Fabric UI JS is 1.4 and the Fabric Core is 7.1. Would you mind to try to use newest libs? May be they already fixed the Command Bar out of the box. As the backlog they still have some issues opened against of the component. – Slava Ivanov
I've just updated Fabric UI and Fabric Core to 1.4.0 and 7.1.2 respectively and nothing has changed in terms of functionality. Any other suggestions? – Alfree92
Is this something you experience: CommandBar: Event handlers lost when moved into overflow? Still open issue. Unfortunately we are using old 2.6 lib and we don't have issues with Commandbar control. For new lib you may want to post question directly into GitHub of developers. As alternative you may post reference to codepen snippet of you command bar where issue is observed, somebody may have a look. – Slava Ivanov
I know this is a bit of an old one but I was having the same problem as described and the context menu items weren't bringing over the onclick event. To get around this I added this line to CommandBar.prototype._drawCommands in fabric.js this.contextualItemOnClick = this._elements.contextMenu.querySelector(CONTEXTUAL_MENU_LINK).onclick; – Marmalade

1 Answers

1
votes

Comment the itemType in the projectMenuItem function. This would fix the overflow issue.

private projectMenuItem(menuItem: SPTermStore.ISPTermObject, itemType: ContextualMenuItemType) : IContextualMenuItem { return({ key: menuItem.identity, name: menuItem.name, //itemType: itemType, iconProps:{ iconName: (menuItem.localCustomProperties.iconName != undefined ? menuItem.localCustomProperties.iconName : null)}, href: menuItem.terms.length == 0 ? (menuItem.localCustomProperties["_Sys_Nav_SimpleLinkUrl"] != undefined ? menuItem.localCustomProperties["_Sys_Nav_SimpleLinkUrl"] : null) : null, subMenuProps: menuItem.terms.length > 0 ? { items : menuItem.terms.map((i) => { return(this.projectMenuItem(i, ContextualMenuItemType.Normal)); }) } : null, isSubMenu: itemType != ContextualMenuItemType.Header, }); }