Sp-dev-docs: sp-dialog crashes when it is opened twice

[jmmartinez84]

Category

• [ ] Question
• [ ] Typo
• [X] Bug
• [ ] Additional article idea

Using spfx 1.7 I've created a custom confirm/cancel dialog.

Expected or Desired Behavior

You can open/close a dialog a much times as you want.

Observed Behavior

When you open the dialog first time it works fine, but when you try to open int again. it shows the grey layout and an error on the console.

react-dom.development.js:526 Warning: render(...): It looks like the React-rendered content of this container was removed without using React. This is not supported and will cause errors. Instead, call ReactDOM.unmountComponentAtNode to empty a container.
printWarning @ react-dom.development.js:526

Steps to Reproduce

Create a new spfx 1.7 Online project.
Add a custom dialog component.
Test it on workbench page.
Try to open the dialog twice.

[jansenbe]

+1. Seeing the same with 1.7. The same behavior is visible when the web part is deployed to the actual page.

[johnguy0]

@jmmartinez84 Thanks for filing the issue.

@jmmartinez84 @jansenbe You can work around this right now by overriding the onAfterClose method with the following snippet:

// In the derived class
protected onAfterClose(): void {
  super.onAfterClose();
  ReactDOM.unmountComponentAtNode(this.domElement);
}

[patmill]

Hey @jmmartinez84 - quick question on this. Did you update your solution to use React16 to see this, or did you continue to use React15 and this started happening?

[jmmartinez84]

I created a brand new project on SPFx 1.7 + React 16

[OliverZeiser]

This workaround does not work in IE. If you open it in IE the second time it crashes again. IE seems to remove the div completely.....

[OliverZeiser]

My workaround right now that also works in IE: Make the Dialog blocking and call ReactDOM.unmountComponentAtNode before closing the dialog and not inside onAfterClose. This works in all Browsers that I have testet.

[aslanovsergey]

Very actual issue

[muthugp]

Having same(as shown below) issue in IE. Works perfect in Chrome and Edge.
Using SPFx 1.7.1 + React 16.3.2. Above workarounds did not work for me.

Can anyone share the working code?

NotFoundError
{
[functions]: ,
__proto__: { },
ABORT_ERR: 20,
code: 8,
constructor: { },
DATA_CLONE_ERR: 25,
DOMSTRING_SIZE_ERR: 2,
HIERARCHY_REQUEST_ERR: 3,
INDEX_SIZE_ERR: 1,
INUSE_ATTRIBUTE_ERR: 10,
INVALID_ACCESS_ERR: 15,
INVALID_CHARACTER_ERR: 5,
INVALID_MODIFICATION_ERR: 13,
INVALID_NODE_TYPE_ERR: 24,
INVALID_STATE_ERR: 11,
message: "NotFoundError",
name: "NotFoundError",
NAMESPACE_ERR: 14,
NETWORK_ERR: 19,
NO_DATA_ALLOWED_ERR: 6,
NO_MODIFICATION_ALLOWED_ERR: 7,
NOT_FOUND_ERR: 8,
NOT_SUPPORTED_ERR: 9,
PARSE_ERR: 81,
QUOTA_EXCEEDED_ERR: 22,
SECURITY_ERR: 18,
SERIALIZE_ERR: 82,
SYNTAX_ERR: 12,
TIMEOUT_ERR: 23,
TYPE_MISMATCH_ERR: 17,
URL_MISMATCH_ERR: 21,
VALIDATION_ERR: 16,
WRONG_DOCUMENT_ERR: 4
}

[DanSantoDomingo]

Suffering from this right now. @OliverZeiser can you please show your code? I look at the BaseDialog and did not find onBeforeClose.

[OliverZeiser]

Just do something like this:

export default class CustomMessageDialog extends BaseDialog {
  public message: string;
  public title: string;
  public render(): void {
    ReactDOM.render(<CustomMessageContent
      close={this.closeDialog.bind(this)}
      title={this.title}
      message={this.message}
    />, this.domElement);
  }

  private closeDialog(): void {
    this.close();
    ReactDOM.unmountComponentAtNode(this.domElement);
  }