0

So I have an spfx webpart that works fine in the workbench, but when deployed does not work the same. It has a fabric CommandBar with nested IContextualMenuItem's. The idea being that you click on the top menu item and it lets you click on a sub-menu item.

In the workbench, it works fine. When I click the top menu item it shows me the sub-items, and when I click on the sub-items,, the handlers run.

When deployed as a webpart, and to my cdn, when I click the top menu item , a postback occurs(or at least the screen repaints and events are not fired).

I boiled it down to the minimum code to reproduce the issue in a project at https://github.com/russgove/issue

Anybody got an idea why that code works differently on the workbench, than it does when deployed?

Here is the code for the component:

import * as React from 'react';
//import styles from './Issuedemo.module.scss';
import { IIssuedemoProps } from './IIssuedemoProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { IContextualMenuItem, } from "office-ui-fabric-react/lib/ContextualMenu";
import { CommandBar, ICommandBarProps } from "office-ui-fabric-react/lib/CommandBar";
export default class Issuedemo extends React.Component<IIssuedemoProps, void> {
  private saySomething() {
    alert("yo");
  }

  private SetupFilters(): Array<IContextualMenuItem> {
    const items = new Array<IContextualMenuItem>();

    const item: IContextualMenuItem = {
      key: "top",
      name: "top",
      title: "uf.managedPropertyName",

    };
    item.items = [];

    item.items.push({
      key: "sub",

      name: "sub",
      title: "sub",
      onClick: this.saySomething.bind(this)
    });

    items.push(item);

    return items;
  }
  public render(): React.ReactElement<IIssuedemoProps> {
    const commandItems: Array<IContextualMenuItem> = this.SetupFilters();
    return (
      <CommandBar items={commandItems} />
    );
  }
}

enter code here
enter code here

UPDATE 20170316 As suggested by Danny below I checked where react was being loaded from.

Whether in the worbench or deployed as a webpart it gets loaded from https://spoprod-a.akamaihd.net/files/sp-client-prod_2017-03-03.007/office-ui-fabric-react.bundle_0a3ab580d0e81059a781f4fc3500f145.js

More interestingly, sometimes the webpart works properly (i.e. does not reload when the to navbar item is clicked) other times it does not.

Looking at the event listeners in chrome the click event in the button that gets generated sometimes has an event wired up to sp-webpart-base (shown below) sometimes it does not. I have no idea why.

enter image description hereWhen that event listener is wired up on the page , the page works properly. When it is not, the page does not work. (it refreshes when the button is clicked).

The above testing was done on a classic page. I tried deploying to a modern page and it works fine.

So the same webpart works differently on classic and modern pages.

  • Work your way back into the F12 Network tab and see where different resources are used. Check the header of Fabric resources for version numbers, filename is not enough. Note. (new) Fabric 6.0.0 introduced some breaking changes. – Danny '365CSI' Engelman Mar 16 '17 at 11:26
  • good idea, thanks. I hope they don't use different versions of fabric! – russellg Mar 16 '17 at 13:07
  • I think this is an issue with the framwork. I opened an issue at github.com/SharePoint/sp-dev-docs/issues – russellg Mar 17 '17 at 0:21
  • The respone from Microsoft was that tis is a known issue. Buttons on classic pages always por back. The IContextualMenuItem renders a button. – russellg Mar 23 '17 at 2:04
  • Hmm.. yet another SPFx doesn't really work in the real world example? – Danny '365CSI' Engelman Mar 23 '17 at 9:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.