Shouldn't the dialogPolyfill be called on the componentDidMount of the component?

[fabiozaffani]

Just a simple question, but wouldn't be better to call the dialog to upgrade with a line of code like this

window.dialogPolyfill.registerDialog(ReactDOM.findDOMNode(this)); or window.dialogPolyfill.registerDialog(ReactDOM.findDOMNode(this.refs.dialog));

Inside the componentDidMount of the dialog component?

[EDIT] For future reference, code snippet to be inserted in componentDidMount

const dialog = ReactDOM.findDOMNode(this);
if (!dialog.showModal) {   // avoid chrome warnings and update only on unsupported browsers
  window.dialogPolyfill.registerDialog(dialog);
}

[tleunen]

At first, I believed it would be best to let the end user register the polyfill, but in the end I don't think it was a good idea. This should be resolved in v2.

[fabiozaffani]

Ah ok, great then!

[mdpedersen]

I agree that this would be much nicer!

Also, after integrating dialog-polyfill in a react-mdl project, I've found it to be somewhat brittle in some situations. When a dialog is removed from the DOM, the polyfill dialog overlay (with class _dialog_overlay) sometimes remains in the DOM, and dialogs that are shown subsequently can no longer receive focus. I'm not yet sure exactly how to reproduce the problem, but it seems to happen in situations where the dialog's high-up ancestor is removed from the DOM. If I carefully ensure that only the dialog is removed before any further DOM manipulation, things seem to work. This is happening in Safari and Firefox.

I wonder if anybody else has encountered similar problems, or if there is anything I should be doing to clean up dialogs after use?

Maybe this is related to the following dialog-polyfill issue with DOMNodeRemoved not always firing:

https://github.com/GoogleChrome/dialog-polyfill/issues/72

[prasadsilva]

@mdpedersen I'm running into this issue. Did you manage to workaround this?

[mdpedersen]

@prasadsilva I didn't find any actual solution, no. My workaround, in cases where this problem occurred, was to ensure that close() is always called on the dialog DOM node before removing it from the DOM (in react-mdl, that means setting the 'open' property to false on the Dialog component).

[fellipeesteves]

Folks, any solution for this now?