Value of input not updating correctly when inside Transition.Group

[Ruben9922]

Steps

• Created new React app using create-react-app in WebStorm

• Installed semantic-ui-react and semantic-ui-css npm packages

• Changed the App class in App.js to the following:

  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        x: ""
      };
    }
  
    render() {
      return (
        <div>
          <Transition.Group>
            <Input value={this.state.x} onChange={e => {
              this.setState({x: e.target.value});
              console.log(e.target.value);
            }}/>
          </Transition.Group>
        </div>
      );
    }
  }
  

Expected Result

With the above code, value should contain the inputted text, so the inputted text is displayed in the browser and outputted to the console.

Actual Result

Value of input field seems to not be updating properly.

Input field is not updated in the browser (so it appears read-only), and value appears to only contain the last character entered when outputted to the console.

Same behaviour also occurs with Form.Input and normal input.

Version

0.72.0

Testcase

https://codepen.io/anon/pen/Ljqwdb

[layershifter]

@Ruben9922 Thanks for detailed report, PR is coming.