Clear the selection after transitions to avoid the child being selected due to multiple clicks.

Author: marnusw

src/ReactCSSTransitionReplace.jsx

@@ -7,10 +7,12 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import PropTypes from 'prop-types'
-import raf from 'dom-helpers/util/requestAnimationFrame'
 import chain from 'chain-function'
 import warning from 'warning'
 
+import raf from 'dom-helpers/util/requestAnimationFrame'
+import { clearSelection } from './utils/dom-helpers'
+
 import ReactCSSTransitionGroupChild from 'react-transition-group/CSSTransitionGroupChild'
 import { transitionTimeout } from 'react-transition-group/utils/PropTypes'
 import { nameShape } from './utils/PropTypes'
@@ -127,6 +129,11 @@ export default class ReactCSSTransitionReplace extends React.Component {
     const keysToLeave = this.keysToLeave
     this.keysToLeave = []
     keysToLeave.forEach(this.performLeave)
+
+    // When the enter completes and the component switches to relative positioning the
+    // child often gets selected after multiple clicks (at least in Chrome). To compensate
+    // the current selection is cleared whenever the component updates.
+    clearSelection()
   }
 
   performAppear(key) {

src/utils/dom-helpers.js

@@ -0,0 +1,9 @@
+/* global document, window */
+
+export function clearSelection() {
+  if (document.selection) {
+    document.selection.empty()
+  } else if (window.getSelection) {
+    window.getSelection().removeAllRanges()
+  }
+}