fix(Modal): handle init modal in SSR

[lh0x00]

• Bug fix
• New feature
• Chore
• Breaking change
• There is an open issue which this change addresses
• I have read the CONTRIBUTING document.
• My commits follow the Git Commit Guidelines
• My code follows the code style of this project.
• My change requires a change to the documentation.
• • I have updated the documentation accordingly.
• I have added tests to cover my changes.
• All new and existing tests passed.

In server-side rendering, Modal will call init but in this time not found document and it's will breaks.

[virgofx]

The defined isSSR flag isn't reliable and window is still defined in multiple SSR environments for polyfills and backwards compatibility.

I believe you can drop that completely and just move this.init() from construction into componentDidMount() as this should work for all cases since it's not called in SSR render. @lamhieu-vk: Can you make this change and confirm this works in your testing for both SSR and client side rendering with open={true} specified.

Reference:

Fix: #1071

[virgofx]

Changes look good. @lamhieu-vk Is everything working as expected in your environment?

[lh0x00]

@virgofx Sorry, I forget change title to WIP. I will mention to you after done!

[virgofx]

No problem. Just let me know if everything is working in your environment as expected as I have not tested personally

[lh0x00]

@virgofx I updated PR, I tested in my app and use next.js to SSR. PR's ready to merge!

[virgofx]

Thanks. Looks good

/cc @TheSharpieOne

[TheSharpieOne]

@virgofx you can squash and merge 😉

[virgofx]

Just wanted you to look at it :)

[lh0x00]

Many thanks for @virgofx @TheSharpieOne

[justingrant]

BTW, this PR also fixes #1323.

[justingrant]

@lamhieu-vk - Does your PR break auto-focus behavior? The implementation of componentDidMount checks this.state.isOpen but your PR moved the initialization of state.isOpen into a setState call in componentDidMount. Because setState runs asynchronously (at least in browser React, although I'm not sure about SSR), state.isOpen will always be false when componentDidMount runs, so the auto-focus check if (this.state.isOpen && this.props.autoFocus) will never be true.

Shouldn't that condition be changed to use this.props instead of this.state? Like this:

  componentDidMount() {
    if (this.props.isOpen) {
      this.init();
      this.setState({ isOpen: true })
    }

    if (this.props.onEnter) {
      this.props.onEnter();
    }

    // currently:  if (this.state.isOpen && this.props.autoFocus) {
    if (this.props.isOpen && this.props.autoFocus) {
      this.setFocus();
    }

    this._isMounted = true;
  }

[lh0x00]

@justingrant I think your comment is true, and it's a break in this case. I will update it soon.