Transition: hiding automatically when setState of parent called on mount

[krajasekhar]

Bug Report

Steps

1. When the child of Transition is a stateful component and is not enclosed by any div in the parent component, hide of transition is not hiding the child but the visible prop is actually false at the moment.
2. When the child of Transition is a stateful component and enclosed by div in parent component, if any function gets triggered from child's componentDidMount which do a setState in parent, transition is hiding the child but the visible prop is still true.
   If unmountOnHide is set true, this auto hide happens after every visible trigger.

Expected Result

1. Shall hide the child component.
2. Shall not auto hide on open.

Actual Result

1. Hide not happening.
2. Auto closing after making it visible.

Version

0.87.1

Testcase

[Fork, update, and replace this pen to show the bug]:

1. https://codesandbox.io/s/transitionhideissue-upze1
2. https://codesandbox.io/s/transitionautocloseissue-lj3km

[layershifter]

It's expected, your component should spread props, at least className and style props:

-<div {...this.props}>
+<div {...this.props}>
+ // or <div className={this.props.className} style={this.props.style}>
  <Image
    size="small"
    src="https://react.semantic-ui.com/images/leaves/1.png"
   />
</div>

This change fixes both examples.

[krajasekhar]

It's expected, your component should spread props, at least className and style props:

-<div {...this.props}>
+<div {...this.props}>
+ // or <div className={this.props.className} style={this.props.style}>
  <Image
    size="small"
    src="https://react.semantic-ui.com/images/leaves/1.png"
   />
</div>

This change fixes both examples.

Hi, Thanks for helping.
This change didn't fix the 2nd example. Please check
https://codesandbox.io/s/transitionautocloseissue-lj3km

[krajasekhar]

The work around fix I got for this is to call setState after the running execution by putting inside setTimeout with zero delay.
setTimeout(() => { this.setState({ name: data.value }); }, 0);

[layershifter]

@krajasekhar thanks for the clarification, definitely looks like a bug 🐛

[honzajerabek]

Another workaround that fixes this for me is to use React.memo() HOC in order to prevent unnecessary re-render of the child component, and trigger the unwanted hide

[layershifter]

This issue was fixed in semantic-ui-react@1.0.0 (#3982) and I can't repro it anymore in linked CodeSandboxes. Please let us know if something still fails.