Modal: bug with SSR rendering

[adam-26]

Steps

See #1531 for steps

Expected Result

Modal should not cause SSR to result in invalid checksum on client

Actual Result

Client checksum is invalid

Version

0.72.0

Testcase

From #1531
https://github.com/kolpav/semantic-ui-ssr-bug

As per the closed issue #1531, rendering a Modal on the server results in an invalid checksum on the client.

The bug is caused in the render() method at this line. The problem is that on the server it does not render the trigger content.

A decent partial solution is to simply change from this (current code @ line 324):

// Short circuit when server side rendering
if (!isBrowser) return null

To this, rendering the trigger component on the server:

// Short circuit when server side rendering
if (!isBrowser) {
  return this.props.trigger;
};

It's not a perfect solution, it will work on the condition that the Modal has a state of closed when rendering on the server. I'm guessing this will be acceptable in most use-cases, as Modal components are generally displayed in response to user interaction and therefore don't need to be rendered on the server.

If this solution would be accepted as a PR, i'll submit one. Please let me know!

Adam.

[layershifter]

I looked a little, you seem right. Feel free to open PR 👍

The only thing I think is that we should wrapper trigger with isValidElement() and returns null when it's false.

[layershifter]

Fixed in #2260.