title: ReactCSSTransitionGroup causing dynamic input field to be un-clickable
body: <p>I am trying to use <code>ReactCSSTransitionGroup</code> to animate a slide-in/slide-out effect of a series of modals. The input fields of the modal are driven by a configuration and dynamically rendered depending on the values of the configuration file.</p>
  <pre><code>import ReactCSSTransitionGroup from 'react-transition-group/CSSTransitionGroup'
  
  const Content = ({ modalContent }) =&gt; {
      return (
          {/* Other random stuff */}
          {
              modalContent &amp;&amp; modalContent.element &amp;&amp; (
                  &lt;ReactCSSTransitionGroup
                      transitionName='somename'
                      transitionEnterTimeout={500}
                      transitionLeaveTimeout={500}
                  &gt; 
                      {React.createElement(modalContent.element)}
                  &lt;/ReactCSSTransitionGroup&gt;
              )
          }
      )
  }
  </code></pre>
  <p><strong>CSS</strong></p>
  <pre><code>.somename-enter {
      transform: translate(100%);
      z-index: 1;
  }
  
  .somename-enter-active {
      transform: translate(0%);
      transition: transform 300ms ease-in-out;
      z-index: 1;
  }
  
  .somename-leave {
      transform: translate(0%);
  }
  
  .somename-leave-active {
      transform: translate(0%);
  }
  </code></pre>
  <p>Currently, the modal page transitions behave beautifully. The components are rendered nicely and the enter and leave transition effects are great.</p>
  <p>One issue I'm having is that upon a transition, I can no longer click into an input field to type info. I can, however, tab into that field but as soon as I leave focus, I can still no longer click into that field with my mouse.</p>
  <p>I have version 1.2.1 of <code>react-transition-group</code> installed.</p>
  <p>I've tried debugging this quite a bit and can't seem to figure out what could be causing this. Removing the <code>ReactCSSTransitionGroup</code> tags makes the pages behave as they should (albeit without the snazzy transitions) and adding it back causes the problem again.</p>
  <p>The way the input fields are generated is that in its <code>componentWillMount</code> function, it goes out and fetches via some API call the form schema for that page and then renders it. For example, one page may have two text input fields and a button and another page may have a text area element and a series of radio buttons.</p>
  <p>When introducing the <code>ReactCSSTransitionGroup</code>, I am unable to interact with any text input field with my mouse at all.</p>
  <p>Any help would be greatly appreciated.</p>