Portalfooter and EditDialog fix

[simonagren]

Category

• Bug Fix
• New Feature
• Related issues: fixes at least Footer: Edit My Links not working in Internet Explorer #102

What's in this Pull Request?

With the newest realease, SPFx 1.7 and sp starter kit there have been some issues with the Portal footer.
There have been errors not being able to open the edit dialog more than once, and saving without any modifications broke the footer.
There was also some saving made when choosing to cancel, etc. So hopefully that's improved now aswell.

I've made some fixes and some IE11 support, actually it should work in all browsers.
The only additional thing for IE11 users could be to add some polyfills if needed.
I needed the PNPJs polyfills for the footer to work in IE11, but not sure everyone would need to.
I did not include the polyfills.

These are the fixes I've made:

• Changed to UIEvents instead of Event. Should not break in IE11 anymore.
• Added blocking to the dialog, because clicking outside caused errors.
• Added code to unmount the dialog, so we are able to open it twice. This is a workaround to solve issues with SPFx 1.7 and basedialog.
• Changed so cancelling doesn't save to UserProfile, and no success messagebar is displayed.
• Changed so saving with no new values doesn't break, but doesn't save to userprofile either.
• Changed so only actual changes (new, edit, delete) are saved to userprofile, and ONLY then the success messagebar is displayed.
• Minor css change to display messagebar properly in IE11 aswell.

Let me know if we need changes :)
/Simon

[Krak86]

@simonagren Hi, what is your proposal to make it workable in IE11? CollabFooter/PortalFooter works fine for me, MyLinks opens as well, but is it not allowed to save links in IE11. What polyfill (or something) can you suggest?

[simonagren]

@Krak86 Hi,
I'm not sure what problem you have if not being able to save links.
As it said in this pull request I made some changes to how the links are being saved.

But what I needed to do was to install the PnPJs polyfills link here

So I did the:

npm install --save @pnp/polyfill-ie11

And in PortalFooterApplicationCustomizer.ts:

import "@pnp/polyfill-ie11";

Then I bundled and repackaged:

gulp bundle --ship && gulp package-solution --ship

Manually added the new solution file and deployed.

[Krak86]

@simonagren thanks for you quick reply, but it doesn't help me. Anyway I found an issue.

First I used ReactDOM.unmountComponentAtNode(this.domElement) method in onAfterClose() method as it was described in official SPFX docs: Use custom dialog boxes with SharePoint Framework Extensions

protected onAfterClose(): void {
    super.onAfterClose();    
    ReactDOM.unmountComponentAtNode(this.domElement);
  }

And it is crashed in IE11. Then I moved ReactDOM.unmountComponentAtNode method to appropriate _cancel and _save methods, according to your PR:

 @autobind
  private _cancel(): void {	  private _cancel(): void {
    this.isSave = false;
    this.links = this.initialLinks;	    this.links = this.initialLinks;
    // Fix for all browsers regarding SP Dialog not being to open twice
    ReactDOM.unmountComponentAtNode(this.domElement);
    this.close();	    this.close();
  }	  }
   @autobind	  @autobind
  private _save(links: Array<IMyLink>): void {	  private _save(links: Array<IMyLink>): void {
    this.isSave = true;
    // Fix for all browsers regarding SP Dialog not being to open twice    
    ReactDOM.unmountComponentAtNode(this.domElement);
    this.links = links;	    this.links = links;
    this.close();	    this.close();
  }	  }

Now it works for Chrome and IE11 as well.

[VesaJuvonen]

thx @simonagren, appreciated.

[simonagren]

@VesaJuvonen my pleasure buddy! :)