From 6940e33b6977d0a6839d4322d98bb9709dcfdf73 Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Wed, 17 Jan 2018 06:34:35 -0800
Subject: [PATCH 01/24] =?UTF-8?q?Prefer=20node=E2=80=99s=20window=20and=20?=
 =?UTF-8?q?document=20over=20globals?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-dom/src/client/ReactDOMSelection.js | 14 ++++--
 .../react-dom/src/events/SelectEventPlugin.js | 48 +++++++++++++------
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMSelection.js b/packages/react-dom/src/client/ReactDOMSelection.js
index 2fe966df8216a..767894a43697e 100644
--- a/packages/react-dom/src/client/ReactDOMSelection.js
+++ b/packages/react-dom/src/client/ReactDOMSelection.js
@@ -14,7 +14,11 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
  * @return {?object}
  */
 export function getOffsets(outerNode) {
-  const selection = window.getSelection && window.getSelection();
+  let win = window;
+  if (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) {
+    win = outerNode.ownerDocument.defaultView;
+  }
+  const selection = win.getSelection && win.getSelection();
 
   if (!selection || selection.rangeCount === 0) {
     return null;
@@ -150,11 +154,13 @@ export function getModernOffsetsFromPoints(
  * @param {object} offsets
  */
 export function setOffsets(node, offsets) {
-  if (!window.getSelection) {
+  const doc = node.ownerDocument || document;
+
+  if (!doc.defaultView.getSelection) {
     return;
   }
 
-  const selection = window.getSelection();
+  const selection = doc.defaultView.getSelection();
   const length = node[getTextContentAccessor()].length;
   let start = Math.min(offsets.start, length);
   let end = offsets.end === undefined ? start : Math.min(offsets.end, length);
@@ -180,7 +186,7 @@ export function setOffsets(node, offsets) {
     ) {
       return;
     }
-    const range = document.createRange();
+    const range = doc.createRange();
     range.setStart(startMarker.node, startMarker.offset);
     selection.removeAllRanges();
 
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index e6193c7973a8c..3f24870e471af 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -64,21 +64,42 @@ function getSelection(node) {
       start: node.selectionStart,
       end: node.selectionEnd,
     };
-  } else if (window.getSelection) {
-    const selection = window.getSelection();
-    return {
-      anchorNode: selection.anchorNode,
-      anchorOffset: selection.anchorOffset,
-      focusNode: selection.focusNode,
-      focusOffset: selection.focusOffset,
-    };
+  } else {
+    let win = window;
+    if (node.ownerDocument && node.ownerDocument.defaultView) {
+      win = node.ownerDocument.defaultView;
+    }
+    if (win.getSelection) {
+      const selection = win.getSelection();
+      return {
+        anchorNode: selection.anchorNode,
+        anchorOffset: selection.anchorOffset,
+        focusNode: selection.focusNode,
+        focusOffset: selection.focusOffset,
+      };
+    }
   }
 }
 
+/**
+ * Get document associated with the event target.
+ *
+ * @param {object} nativeEventTarget
+ * @return {Document}
+ */
+function getEventTargetDocument(eventTarget) {
+  return eventTarget.window === eventTarget
+    ? eventTarget.document
+    : eventTarget.nodeType === DOCUMENT_NODE
+      ? eventTarget
+      : eventTarget.ownerDocument;
+}
+
 /**
  * Poll selection to see whether it's changed.
  *
  * @param {object} nativeEvent
+ * @param {object} nativeEventTarget
  * @return {?SyntheticEvent}
  */
 function constructSelectEvent(nativeEvent, nativeEventTarget) {
@@ -86,10 +107,12 @@ function constructSelectEvent(nativeEvent, nativeEventTarget) {
   // selection (this matches native `select` event behavior). In HTML5, select
   // fires only on input and textarea thus if there's no focused element we
   // won't dispatch.
+  const doc = getEventTargetDocument(nativeEventTarget);
+
   if (
     mouseDown ||
     activeElement == null ||
-    activeElement !== getActiveElement()
+    activeElement !== getActiveElement(doc)
   ) {
     return null;
   }
@@ -140,12 +163,7 @@ const SelectEventPlugin = {
     nativeEvent,
     nativeEventTarget,
   ) {
-    const doc =
-      nativeEventTarget.window === nativeEventTarget
-        ? nativeEventTarget.document
-        : nativeEventTarget.nodeType === DOCUMENT_NODE
-          ? nativeEventTarget
-          : nativeEventTarget.ownerDocument;
+    const doc = getEventTargetDocument(nativeEventTarget);
     // Track whether all listeners exists for this plugin. If none exist, we do
     // not extract events. See #3639.
     if (!doc || !isListeningToAllDependencies('onSelect', doc)) {

From 3f3c1d7f01442108f37db3b9080460c7c921eaec Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Wed, 17 Jan 2018 08:14:00 -0800
Subject: [PATCH 02/24] Support active elements in nested browsing contexts

---
 .../src/client/ReactInputSelection.js         | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index 506153a118053..51376ca02e9b2 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -12,7 +12,25 @@ import * as ReactDOMSelection from './ReactDOMSelection';
 import {ELEMENT_NODE} from '../shared/HTMLNodeType';
 
 function isInDocument(node) {
-  return containsNode(document.documentElement, node);
+  return (
+    node &&
+    node.ownerDocument &&
+    containsNode(node.ownerDocument.documentElement, node)
+  );
+}
+
+function getActiveElementDeep() {
+  let win = window;
+  let element = getActiveElement();
+  while (element instanceof win.HTMLIFrameElement) {
+    try {
+      win = element.contentDocument.defaultView;
+    } catch (e) {
+      return element;
+    }
+    element = getActiveElement(win.document);
+  }
+  return element;
 }
 
 /**
@@ -33,7 +51,7 @@ export function hasSelectionCapabilities(elem) {
 }
 
 export function getSelectionInformation() {
-  const focusedElem = getActiveElement();
+  const focusedElem = getActiveElementDeep();
   return {
     focusedElem: focusedElem,
     selectionRange: hasSelectionCapabilities(focusedElem)
@@ -48,7 +66,7 @@ export function getSelectionInformation() {
  * nodes and place them back in, resulting in focus being lost.
  */
 export function restoreSelection(priorSelectionInformation) {
-  const curFocusedElem = getActiveElement();
+  const curFocusedElem = getActiveElementDeep();
   const priorFocusedElem = priorSelectionInformation.focusedElem;
   const priorSelectionRange = priorSelectionInformation.selectionRange;
   if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {

From 51be426d3d778558282abf6364e04f3f0a591e64 Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Tue, 23 Jan 2018 07:11:54 -0800
Subject: [PATCH 03/24] Avoid invoking defaultView getter unnecessarily

---
 packages/react-dom/src/client/ReactDOMSelection.js | 12 +++++-------
 packages/react-dom/src/events/SelectEventPlugin.js |  6 ++----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMSelection.js b/packages/react-dom/src/client/ReactDOMSelection.js
index 767894a43697e..078316652f0a7 100644
--- a/packages/react-dom/src/client/ReactDOMSelection.js
+++ b/packages/react-dom/src/client/ReactDOMSelection.js
@@ -14,10 +14,8 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
  * @return {?object}
  */
 export function getOffsets(outerNode) {
-  let win = window;
-  if (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) {
-    win = outerNode.ownerDocument.defaultView;
-  }
+  const win =
+    (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) || window;
   const selection = win.getSelection && win.getSelection();
 
   if (!selection || selection.rangeCount === 0) {
@@ -155,12 +153,12 @@ export function getModernOffsetsFromPoints(
  */
 export function setOffsets(node, offsets) {
   const doc = node.ownerDocument || document;
-
-  if (!doc.defaultView.getSelection) {
+  const win = doc ? doc.defaultView : window;
+  if (!win.getSelection) {
     return;
   }
 
-  const selection = doc.defaultView.getSelection();
+  const selection = win.getSelection();
   const length = node[getTextContentAccessor()].length;
   let start = Math.min(offsets.start, length);
   let end = offsets.end === undefined ? start : Math.min(offsets.end, length);
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index 3f24870e471af..f04a4522ce5c7 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -65,10 +65,8 @@ function getSelection(node) {
       end: node.selectionEnd,
     };
   } else {
-    let win = window;
-    if (node.ownerDocument && node.ownerDocument.defaultView) {
-      win = node.ownerDocument.defaultView;
-    }
+    const win =
+      (node.ownerDocument && node.ownerDocument.defaultView) || window;
     if (win.getSelection) {
       const selection = win.getSelection();
       return {

From 37140671193c79e3cfd59b3a355b625185dc8d55 Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Wed, 17 Jan 2018 06:34:35 -0800
Subject: [PATCH 04/24] =?UTF-8?q?Prefer=20node=E2=80=99s=20window=20and=20?=
 =?UTF-8?q?document=20over=20globals?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../react-dom/src/client/ReactDOMSelection.js | 14 ++++--
 .../react-dom/src/events/SelectEventPlugin.js | 48 +++++++++++++------
 2 files changed, 43 insertions(+), 19 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMSelection.js b/packages/react-dom/src/client/ReactDOMSelection.js
index 2fe966df8216a..767894a43697e 100644
--- a/packages/react-dom/src/client/ReactDOMSelection.js
+++ b/packages/react-dom/src/client/ReactDOMSelection.js
@@ -14,7 +14,11 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
  * @return {?object}
  */
 export function getOffsets(outerNode) {
-  const selection = window.getSelection && window.getSelection();
+  let win = window;
+  if (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) {
+    win = outerNode.ownerDocument.defaultView;
+  }
+  const selection = win.getSelection && win.getSelection();
 
   if (!selection || selection.rangeCount === 0) {
     return null;
@@ -150,11 +154,13 @@ export function getModernOffsetsFromPoints(
  * @param {object} offsets
  */
 export function setOffsets(node, offsets) {
-  if (!window.getSelection) {
+  const doc = node.ownerDocument || document;
+
+  if (!doc.defaultView.getSelection) {
     return;
   }
 
-  const selection = window.getSelection();
+  const selection = doc.defaultView.getSelection();
   const length = node[getTextContentAccessor()].length;
   let start = Math.min(offsets.start, length);
   let end = offsets.end === undefined ? start : Math.min(offsets.end, length);
@@ -180,7 +186,7 @@ export function setOffsets(node, offsets) {
     ) {
       return;
     }
-    const range = document.createRange();
+    const range = doc.createRange();
     range.setStart(startMarker.node, startMarker.offset);
     selection.removeAllRanges();
 
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index e6193c7973a8c..3f24870e471af 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -64,21 +64,42 @@ function getSelection(node) {
       start: node.selectionStart,
       end: node.selectionEnd,
     };
-  } else if (window.getSelection) {
-    const selection = window.getSelection();
-    return {
-      anchorNode: selection.anchorNode,
-      anchorOffset: selection.anchorOffset,
-      focusNode: selection.focusNode,
-      focusOffset: selection.focusOffset,
-    };
+  } else {
+    let win = window;
+    if (node.ownerDocument && node.ownerDocument.defaultView) {
+      win = node.ownerDocument.defaultView;
+    }
+    if (win.getSelection) {
+      const selection = win.getSelection();
+      return {
+        anchorNode: selection.anchorNode,
+        anchorOffset: selection.anchorOffset,
+        focusNode: selection.focusNode,
+        focusOffset: selection.focusOffset,
+      };
+    }
   }
 }
 
+/**
+ * Get document associated with the event target.
+ *
+ * @param {object} nativeEventTarget
+ * @return {Document}
+ */
+function getEventTargetDocument(eventTarget) {
+  return eventTarget.window === eventTarget
+    ? eventTarget.document
+    : eventTarget.nodeType === DOCUMENT_NODE
+      ? eventTarget
+      : eventTarget.ownerDocument;
+}
+
 /**
  * Poll selection to see whether it's changed.
  *
  * @param {object} nativeEvent
+ * @param {object} nativeEventTarget
  * @return {?SyntheticEvent}
  */
 function constructSelectEvent(nativeEvent, nativeEventTarget) {
@@ -86,10 +107,12 @@ function constructSelectEvent(nativeEvent, nativeEventTarget) {
   // selection (this matches native `select` event behavior). In HTML5, select
   // fires only on input and textarea thus if there's no focused element we
   // won't dispatch.
+  const doc = getEventTargetDocument(nativeEventTarget);
+
   if (
     mouseDown ||
     activeElement == null ||
-    activeElement !== getActiveElement()
+    activeElement !== getActiveElement(doc)
   ) {
     return null;
   }
@@ -140,12 +163,7 @@ const SelectEventPlugin = {
     nativeEvent,
     nativeEventTarget,
   ) {
-    const doc =
-      nativeEventTarget.window === nativeEventTarget
-        ? nativeEventTarget.document
-        : nativeEventTarget.nodeType === DOCUMENT_NODE
-          ? nativeEventTarget
-          : nativeEventTarget.ownerDocument;
+    const doc = getEventTargetDocument(nativeEventTarget);
     // Track whether all listeners exists for this plugin. If none exist, we do
     // not extract events. See #3639.
     if (!doc || !isListeningToAllDependencies('onSelect', doc)) {

From 66b87667ccf820b8201486c0e902511d9dd823dd Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Wed, 17 Jan 2018 08:14:00 -0800
Subject: [PATCH 05/24] Support active elements in nested browsing contexts

---
 .../src/client/ReactInputSelection.js         | 24 ++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index 506153a118053..51376ca02e9b2 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -12,7 +12,25 @@ import * as ReactDOMSelection from './ReactDOMSelection';
 import {ELEMENT_NODE} from '../shared/HTMLNodeType';
 
 function isInDocument(node) {
-  return containsNode(document.documentElement, node);
+  return (
+    node &&
+    node.ownerDocument &&
+    containsNode(node.ownerDocument.documentElement, node)
+  );
+}
+
+function getActiveElementDeep() {
+  let win = window;
+  let element = getActiveElement();
+  while (element instanceof win.HTMLIFrameElement) {
+    try {
+      win = element.contentDocument.defaultView;
+    } catch (e) {
+      return element;
+    }
+    element = getActiveElement(win.document);
+  }
+  return element;
 }
 
 /**
@@ -33,7 +51,7 @@ export function hasSelectionCapabilities(elem) {
 }
 
 export function getSelectionInformation() {
-  const focusedElem = getActiveElement();
+  const focusedElem = getActiveElementDeep();
   return {
     focusedElem: focusedElem,
     selectionRange: hasSelectionCapabilities(focusedElem)
@@ -48,7 +66,7 @@ export function getSelectionInformation() {
  * nodes and place them back in, resulting in focus being lost.
  */
 export function restoreSelection(priorSelectionInformation) {
-  const curFocusedElem = getActiveElement();
+  const curFocusedElem = getActiveElementDeep();
   const priorFocusedElem = priorSelectionInformation.focusedElem;
   const priorSelectionRange = priorSelectionInformation.selectionRange;
   if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {

From 75bc65eef9cd175e5999ea2e628fc52ce7e7e6dd Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Tue, 23 Jan 2018 07:11:54 -0800
Subject: [PATCH 06/24] Avoid invoking defaultView getter unnecessarily

---
 packages/react-dom/src/client/ReactDOMSelection.js | 12 +++++-------
 packages/react-dom/src/events/SelectEventPlugin.js |  6 ++----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMSelection.js b/packages/react-dom/src/client/ReactDOMSelection.js
index 767894a43697e..078316652f0a7 100644
--- a/packages/react-dom/src/client/ReactDOMSelection.js
+++ b/packages/react-dom/src/client/ReactDOMSelection.js
@@ -14,10 +14,8 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
  * @return {?object}
  */
 export function getOffsets(outerNode) {
-  let win = window;
-  if (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) {
-    win = outerNode.ownerDocument.defaultView;
-  }
+  const win =
+    (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) || window;
   const selection = win.getSelection && win.getSelection();
 
   if (!selection || selection.rangeCount === 0) {
@@ -155,12 +153,12 @@ export function getModernOffsetsFromPoints(
  */
 export function setOffsets(node, offsets) {
   const doc = node.ownerDocument || document;
-
-  if (!doc.defaultView.getSelection) {
+  const win = doc ? doc.defaultView : window;
+  if (!win.getSelection) {
     return;
   }
 
-  const selection = doc.defaultView.getSelection();
+  const selection = win.getSelection();
   const length = node[getTextContentAccessor()].length;
   let start = Math.min(offsets.start, length);
   let end = offsets.end === undefined ? start : Math.min(offsets.end, length);
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index 3f24870e471af..f04a4522ce5c7 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -65,10 +65,8 @@ function getSelection(node) {
       end: node.selectionEnd,
     };
   } else {
-    let win = window;
-    if (node.ownerDocument && node.ownerDocument.defaultView) {
-      win = node.ownerDocument.defaultView;
-    }
+    const win =
+      (node.ownerDocument && node.ownerDocument.defaultView) || window;
     if (win.getSelection) {
       const selection = win.getSelection();
       return {

From 5a61b664be14eb6f99752fb7e8d6de96912c2f25 Mon Sep 17 00:00:00 2001
From: Brandon Dail <brandondail@fb.com>
Date: Sun, 28 Jan 2018 18:49:13 -0800
Subject: [PATCH 07/24] Implement selection event fixtures

---
 fixtures/dom/package.json                     |  1 +
 fixtures/dom/public/index.html                |  1 +
 fixtures/dom/src/components/Header.js         |  1 +
 fixtures/dom/src/components/Iframe.js         | 53 +++++++++++++++++++
 fixtures/dom/src/components/fixtures/index.js |  3 ++
 .../selection-events/DraftJsEditorTestCase.js | 36 +++++++++++++
 .../ReorderedInputsTestCase.js                | 49 +++++++++++++++++
 .../fixtures/selection-events/index.js        | 24 +++++++++
 fixtures/dom/src/react-loader.js              |  8 +++
 fixtures/dom/yarn.lock                        | 14 ++++-
 10 files changed, 189 insertions(+), 1 deletion(-)
 create mode 100644 fixtures/dom/src/components/Iframe.js
 create mode 100644 fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js
 create mode 100644 fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js
 create mode 100644 fixtures/dom/src/components/fixtures/selection-events/index.js

diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
index 333c566c7ded9..b8de05fc70fbd 100644
--- a/fixtures/dom/package.json
+++ b/fixtures/dom/package.json
@@ -8,6 +8,7 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "core-js": "^2.4.1",
+    "draft-js": "^0.10.5",
     "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
     "react": "^15.4.1",
diff --git a/fixtures/dom/public/index.html b/fixtures/dom/public/index.html
index f6bb303c9a975..b370c3c8eaefb 100644
--- a/fixtures/dom/public/index.html
+++ b/fixtures/dom/public/index.html
@@ -16,6 +16,7 @@
     <title>React App</title>
     <script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
     <script src="https://unpkg.com/expect@1.20.2/umd/expect.min.js"></script>
+    <script src="https://unpkg.com/immutable@3.8.2/dist/immutable.js"></script>
   </head>
   <body>
     <div id="root"></div>
diff --git a/fixtures/dom/src/components/Header.js b/fixtures/dom/src/components/Header.js
index fbb2e6e505b39..19fd16c15f46f 100644
--- a/fixtures/dom/src/components/Header.js
+++ b/fixtures/dom/src/components/Header.js
@@ -64,6 +64,7 @@ class Header extends React.Component {
                 <option value="/event-pooling">Event Pooling</option>
                 <option value="/custom-elements">Custom Elements</option>
                 <option value="/media-events">Media Events</option>
+                <option value="/selection-events">Selection Events</option>
               </select>
             </label>
             <label htmlFor="react_version">
diff --git a/fixtures/dom/src/components/Iframe.js b/fixtures/dom/src/components/Iframe.js
new file mode 100644
index 0000000000000..7c3fe3d3ae683
--- /dev/null
+++ b/fixtures/dom/src/components/Iframe.js
@@ -0,0 +1,53 @@
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+class IframePortal extends React.Component {
+  state = {ref: null};
+
+  handleRef = (ref) => {
+    if (ref !== this.state.ref) {
+      this.setState({ref});
+      if (ref && ref.contentDocument && this.props.head) {
+        ref.contentDocument.head.innerHTML = this.props.head;
+      }
+    }
+  };
+
+  render() {
+    const {ref} = this.state;
+    let portal = null;
+    if (ref && ref.contentDocument) {
+      portal = ReactDOM.createPortal(
+        this.props.children,
+        ref.contentDocument.body,
+      );
+    }
+
+    return (
+      <div>
+        <iframe
+          style={{ border: 'none', height: this.props.height }}
+          ref={this.handleRef} />
+        {portal}
+      </div>
+    );
+  }
+}
+
+class IframeSubtree extends React.Component {
+  warned = false;
+  render() {
+    if (!this.warned) {
+      console.error(`IFrame has not yet been implemented for React v${React.version}`);
+      this.warned = true;
+    }
+    return (
+      <div>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+
+export default ReactDOM.createPortal ? IframePortal : IframeSubtree;
diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js
index 9b40eb9b1f857..b94bf73bcb5f1 100644
--- a/fixtures/dom/src/components/fixtures/index.js
+++ b/fixtures/dom/src/components/fixtures/index.js
@@ -11,6 +11,7 @@ import ErrorHandling from './error-handling';
 import EventPooling from './event-pooling';
 import CustomElementFixtures from './custom-elements';
 import MediaEventsFixtures from './media-events';
+import SelectionEventsFixtures from './selection-events';
 
 const React = window.React;
 
@@ -46,6 +47,8 @@ function FixturesPage() {
       return <CustomElementFixtures />;
     case '/media-events':
       return <MediaEventsFixtures />;
+    case '/selection-events':
+      return <SelectionEventsFixtures />;
     default:
       return <p>Please select a test fixture.</p>;
   }
diff --git a/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js b/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js
new file mode 100644
index 0000000000000..0cbc7b4f749da
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js
@@ -0,0 +1,36 @@
+import TestCase from '../../TestCase';
+import Iframe from '../../Iframe';
+const React = window.React;
+const {EditorState, Editor} = window.Draft;
+
+
+export default class DraftJsEditorTestCase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {editorState: EditorState.createEmpty()};
+    this.onChange = (editorState) => this.setState({editorState});
+  }
+  render() {
+    return (
+      <TestCase
+        title="Cursor Position in a Draft.js Editor"
+        description="Draft.js is a rich text editor system for React.
+        This verifies that the selection restoration functionality it depends on
+        works in an iframe.">
+        <TestCase.Steps>
+          <li>Enter some text into the Draft.js editor (grey outlined box)</li>
+          <li>Change your cursor position to somewhere in the middle of the text</li>
+          <li>Enter a new character</li>
+        </TestCase.Steps>
+        <TestCase.ExpectedResult>
+          The cursor should not jump positions
+        </TestCase.ExpectedResult>
+        <Iframe height={60}>
+          <div style={{ border: '1px solid grey' }}>
+            <Editor editorState={this.state.editorState} onChange={this.onChange} />
+          </div>
+        </Iframe>
+      </TestCase>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js b/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js
new file mode 100644
index 0000000000000..98676ce0d2fee
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js
@@ -0,0 +1,49 @@
+import TestCase from '../../TestCase';
+import Iframe from '../../Iframe';
+const React = window.React;
+
+export default class ReorderedInputsTestCase extends React.Component {
+
+  state = { count: 0 };
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState({ count: this.state.count + 1 });
+    }, 2000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  renderInputs() {
+    const inputs = [
+      <input key={1} defaultValue="Foo" />,
+      <input key={2} defaultValue="Bar" />,
+    ];
+    if (this.state.count % 2 === 0) {
+      inputs.reverse();
+    }
+    return inputs;
+  }
+
+  render() {
+    return (
+      <TestCase
+        title="Reordered input elements in iframes"
+        description="">
+        <TestCase.Steps>
+          <li>The two inputs below swap positions every two seconds</li>
+          <li>Select the text in either of them</li>
+          <li>Wait for the swap to occur</li>
+        </TestCase.Steps>
+        <TestCase.ExpectedResult>
+          The selection you made should be maintained
+        </TestCase.ExpectedResult>
+        <Iframe height={50}>
+          {this.renderInputs()}
+        </Iframe>
+      </TestCase>
+    )
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/selection-events/index.js b/fixtures/dom/src/components/fixtures/selection-events/index.js
new file mode 100644
index 0000000000000..2654789b7590a
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/selection-events/index.js
@@ -0,0 +1,24 @@
+import FixtureSet from '../../FixtureSet';
+import TestCase from '../../TestCase';
+import Iframe from '../../Iframe';
+import ReorderedInputsTestCase from './ReorderedInputsTestCase';
+import DraftJsEditorTestCase from './DraftJsEditorTestCase';
+const React = window.React;
+
+
+export default function SelectionEvents() {
+  return (
+    <FixtureSet
+      title="Selection Restoration in iframes"
+      description="
+      When React commits changes it may perform operations which cause existing
+      selection state to be lost. This is manually managed by reading the
+      selection state before commits and then restoring it afterwards.
+      This selection restoration process should work for elements rendered in
+      iframes.
+      ">
+      <ReorderedInputsTestCase />
+      <DraftJsEditorTestCase />
+    </FixtureSet>
+  );
+};
diff --git a/fixtures/dom/src/react-loader.js b/fixtures/dom/src/react-loader.js
index 6d108b0c28a83..1c496c78f1b47 100644
--- a/fixtures/dom/src/react-loader.js
+++ b/fixtures/dom/src/react-loader.js
@@ -35,6 +35,11 @@ function loadScript(src) {
 }
 
 export default function loadReact() {
+  // const DRAFT_JS_PATH = 'https://unpkg.com/draft-js@0.10.5/dist/Draft.js';
+  // @TODO We're using a build of draft-js provided by @acusti in https://github.com/facebook/react/pull/12037
+  // This is because currently draft doesn't support iframes. This should be changed back to the official
+  // release on unpkg once the draft fixes are merged.
+  const DRAFT_JS_PATH = 'https://cdn.rawgit.com/brandcast/draft-js-built/d6c2ffc64914b001411356c0bfab24e831bc5429/dist/Draft.js';
   let REACT_PATH = 'react.development.js';
   let DOM_PATH = 'react-dom.development.js';
 
@@ -70,6 +75,9 @@ export default function loadReact() {
       window.ReactDOM = window.React;
     });
   }
+  request = request.then(() => loadScript(DRAFT_JS_PATH));
+  // We need Draft.js for the selection events fixture. It has to load
+  // after ReactDOM.
 
   return request;
 }
diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
index 3fb98bd9f456b..95d57f059be76 100644
--- a/fixtures/dom/yarn.lock
+++ b/fixtures/dom/yarn.lock
@@ -2153,6 +2153,14 @@ dotenv@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-4.0.0.tgz#864ef1379aced55ce6f95debecdce179f7a0cd1d"
 
+draft-js@^0.10.5:
+  version "0.10.5"
+  resolved "https://registry.yarnpkg.com/draft-js/-/draft-js-0.10.5.tgz#bfa9beb018fe0533dbb08d6675c371a6b08fa742"
+  dependencies:
+    fbjs "^0.8.15"
+    immutable "~3.7.4"
+    object-assign "^4.1.0"
+
 duplexer2@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
@@ -2672,7 +2680,7 @@ fbjs@^0.8.1, fbjs@^0.8.4:
     setimmediate "^1.0.5"
     ua-parser-js "^0.7.9"
 
-fbjs@^0.8.16:
+fbjs@^0.8.15, fbjs@^0.8.16:
   version "0.8.16"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -3302,6 +3310,10 @@ ignore@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
 
+immutable@~3.7.4:
+  version "3.7.6"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-3.7.6.tgz#13b4d3cb12befa15482a26fe1b2ebae640071e4b"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"

From f7527929c8df7592f7391314cbd833a1691297e6 Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Wed, 17 Jan 2018 06:34:35 -0800
Subject: [PATCH 08/24] =?UTF-8?q?Prefer=20node=E2=80=99s=20window=20and=20?=
 =?UTF-8?q?document=20over=20globals?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react-dom/src/client/ReactDOMSelection.js | 12 +++++++-----
 packages/react-dom/src/events/SelectEventPlugin.js |  6 ++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMSelection.js b/packages/react-dom/src/client/ReactDOMSelection.js
index 078316652f0a7..767894a43697e 100644
--- a/packages/react-dom/src/client/ReactDOMSelection.js
+++ b/packages/react-dom/src/client/ReactDOMSelection.js
@@ -14,8 +14,10 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
  * @return {?object}
  */
 export function getOffsets(outerNode) {
-  const win =
-    (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) || window;
+  let win = window;
+  if (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) {
+    win = outerNode.ownerDocument.defaultView;
+  }
   const selection = win.getSelection && win.getSelection();
 
   if (!selection || selection.rangeCount === 0) {
@@ -153,12 +155,12 @@ export function getModernOffsetsFromPoints(
  */
 export function setOffsets(node, offsets) {
   const doc = node.ownerDocument || document;
-  const win = doc ? doc.defaultView : window;
-  if (!win.getSelection) {
+
+  if (!doc.defaultView.getSelection) {
     return;
   }
 
-  const selection = win.getSelection();
+  const selection = doc.defaultView.getSelection();
   const length = node[getTextContentAccessor()].length;
   let start = Math.min(offsets.start, length);
   let end = offsets.end === undefined ? start : Math.min(offsets.end, length);
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index f04a4522ce5c7..3f24870e471af 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -65,8 +65,10 @@ function getSelection(node) {
       end: node.selectionEnd,
     };
   } else {
-    const win =
-      (node.ownerDocument && node.ownerDocument.defaultView) || window;
+    let win = window;
+    if (node.ownerDocument && node.ownerDocument.defaultView) {
+      win = node.ownerDocument.defaultView;
+    }
     if (win.getSelection) {
       const selection = win.getSelection();
       return {

From a8fcf05b0d5b403f836a1160ef75b5becbf74415 Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Tue, 23 Jan 2018 07:11:54 -0800
Subject: [PATCH 09/24] Avoid invoking defaultView getter unnecessarily

---
 packages/react-dom/src/client/ReactDOMSelection.js | 12 +++++-------
 packages/react-dom/src/events/SelectEventPlugin.js |  6 ++----
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMSelection.js b/packages/react-dom/src/client/ReactDOMSelection.js
index 767894a43697e..078316652f0a7 100644
--- a/packages/react-dom/src/client/ReactDOMSelection.js
+++ b/packages/react-dom/src/client/ReactDOMSelection.js
@@ -14,10 +14,8 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
  * @return {?object}
  */
 export function getOffsets(outerNode) {
-  let win = window;
-  if (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) {
-    win = outerNode.ownerDocument.defaultView;
-  }
+  const win =
+    (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) || window;
   const selection = win.getSelection && win.getSelection();
 
   if (!selection || selection.rangeCount === 0) {
@@ -155,12 +153,12 @@ export function getModernOffsetsFromPoints(
  */
 export function setOffsets(node, offsets) {
   const doc = node.ownerDocument || document;
-
-  if (!doc.defaultView.getSelection) {
+  const win = doc ? doc.defaultView : window;
+  if (!win.getSelection) {
     return;
   }
 
-  const selection = doc.defaultView.getSelection();
+  const selection = win.getSelection();
   const length = node[getTextContentAccessor()].length;
   let start = Math.min(offsets.start, length);
   let end = offsets.end === undefined ? start : Math.min(offsets.end, length);
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index 3f24870e471af..f04a4522ce5c7 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -65,10 +65,8 @@ function getSelection(node) {
       end: node.selectionEnd,
     };
   } else {
-    let win = window;
-    if (node.ownerDocument && node.ownerDocument.defaultView) {
-      win = node.ownerDocument.defaultView;
-    }
+    const win =
+      (node.ownerDocument && node.ownerDocument.defaultView) || window;
     if (win.getSelection) {
       const selection = win.getSelection();
       return {

From 00036812956783e879af3c8195f761c6a28a374e Mon Sep 17 00:00:00 2001
From: Brandon Dail <brandondail@fb.com>
Date: Mon, 12 Feb 2018 14:17:14 -0800
Subject: [PATCH 10/24] Fix react-scripts to work with alphas after 16.0.0

The current logic just checks if the version is an alpha with a major version of 16 to account for weirdness with the 16 RC releases, but now we have alphas for newer minor releases that don't have weirdness
---
 fixtures/dom/package.json        | 2 +-
 fixtures/dom/src/react-loader.js | 7 ++++++-
 fixtures/dom/yarn.lock           | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
index b8de05fc70fbd..87b765f42610a 100644
--- a/fixtures/dom/package.json
+++ b/fixtures/dom/package.json
@@ -13,7 +13,7 @@
     "query-string": "^4.2.3",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
-    "semver": "^5.3.0"
+    "semver": "^5.5.0"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/fixtures/dom/src/react-loader.js b/fixtures/dom/src/react-loader.js
index 1c496c78f1b47..baa9ed6e13dd3 100644
--- a/fixtures/dom/src/react-loader.js
+++ b/fixtures/dom/src/react-loader.js
@@ -1,3 +1,5 @@
+import semver from 'semver'
+
 /**
  * Take a version from the window query string and load a specific
  * version of React.
@@ -46,10 +48,13 @@ export default function loadReact() {
   let query = parseQuery(window.location.search);
   let version = query.version || 'local';
 
+
   if (version !== 'local') {
+    const {major, minor, prerelease} = semver(version);
+    const [preReleaseStage, preReleaseVersion] = prerelease;
     // The file structure was updated in 16. This wasn't the case for alphas.
     // Load the old module location for anything less than 16 RC
-    if (parseInt(version, 10) >= 16 && version.indexOf('alpha') < 0) {
+    if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) {
       REACT_PATH =
         'https://unpkg.com/react@' + version + '/umd/react.development.js';
       DOM_PATH =
diff --git a/fixtures/dom/yarn.lock b/fixtures/dom/yarn.lock
index 95d57f059be76..188f76fb40214 100644
--- a/fixtures/dom/yarn.lock
+++ b/fixtures/dom/yarn.lock
@@ -5890,6 +5890,10 @@ semver@^5.0.3:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
 
+semver@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
 send@0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"

From fef851959c48144fe92448862030afd66349bd4b Mon Sep 17 00:00:00 2001
From: Brandon Dail <brandondail@fb.com>
Date: Mon, 12 Feb 2018 14:23:48 -0800
Subject: [PATCH 11/24] Run prettier on new selection events fixtures

---
 fixtures/dom/src/components/Iframe.js         | 22 +++++++++----------
 .../selection-events/DraftJsEditorTestCase.js | 14 +++++++-----
 .../ReorderedInputsTestCase.js                | 15 +++++--------
 .../fixtures/selection-events/index.js        |  3 +--
 fixtures/dom/src/react-loader.js              |  6 ++---
 5 files changed, 28 insertions(+), 32 deletions(-)

diff --git a/fixtures/dom/src/components/Iframe.js b/fixtures/dom/src/components/Iframe.js
index 7c3fe3d3ae683..8e9feb0e0485a 100644
--- a/fixtures/dom/src/components/Iframe.js
+++ b/fixtures/dom/src/components/Iframe.js
@@ -4,7 +4,7 @@ const ReactDOM = window.ReactDOM;
 class IframePortal extends React.Component {
   state = {ref: null};
 
-  handleRef = (ref) => {
+  handleRef = ref => {
     if (ref !== this.state.ref) {
       this.setState({ref});
       if (ref && ref.contentDocument && this.props.head) {
@@ -19,15 +19,16 @@ class IframePortal extends React.Component {
     if (ref && ref.contentDocument) {
       portal = ReactDOM.createPortal(
         this.props.children,
-        ref.contentDocument.body,
+        ref.contentDocument.body
       );
     }
 
     return (
       <div>
         <iframe
-          style={{ border: 'none', height: this.props.height }}
-          ref={this.handleRef} />
+          style={{border: 'none', height: this.props.height}}
+          ref={this.handleRef}
+        />
         {portal}
       </div>
     );
@@ -38,16 +39,13 @@ class IframeSubtree extends React.Component {
   warned = false;
   render() {
     if (!this.warned) {
-      console.error(`IFrame has not yet been implemented for React v${React.version}`);
+      console.error(
+        `IFrame has not yet been implemented for React v${React.version}`
+      );
       this.warned = true;
     }
-    return (
-      <div>
-        {this.props.children}
-      </div>
-    )
+    return <div>{this.props.children}</div>;
   }
 }
 
-
-export default ReactDOM.createPortal ? IframePortal : IframeSubtree;
+export default (ReactDOM.createPortal ? IframePortal : IframeSubtree);
diff --git a/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js b/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js
index 0cbc7b4f749da..d478f17bc7d14 100644
--- a/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js
+++ b/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js
@@ -3,12 +3,11 @@ import Iframe from '../../Iframe';
 const React = window.React;
 const {EditorState, Editor} = window.Draft;
 
-
 export default class DraftJsEditorTestCase extends React.Component {
   constructor(props) {
     super(props);
     this.state = {editorState: EditorState.createEmpty()};
-    this.onChange = (editorState) => this.setState({editorState});
+    this.onChange = editorState => this.setState({editorState});
   }
   render() {
     return (
@@ -19,15 +18,20 @@ export default class DraftJsEditorTestCase extends React.Component {
         works in an iframe.">
         <TestCase.Steps>
           <li>Enter some text into the Draft.js editor (grey outlined box)</li>
-          <li>Change your cursor position to somewhere in the middle of the text</li>
+          <li>
+            Change your cursor position to somewhere in the middle of the text
+          </li>
           <li>Enter a new character</li>
         </TestCase.Steps>
         <TestCase.ExpectedResult>
           The cursor should not jump positions
         </TestCase.ExpectedResult>
         <Iframe height={60}>
-          <div style={{ border: '1px solid grey' }}>
-            <Editor editorState={this.state.editorState} onChange={this.onChange} />
+          <div style={{border: '1px solid grey'}}>
+            <Editor
+              editorState={this.state.editorState}
+              onChange={this.onChange}
+            />
           </div>
         </Iframe>
       </TestCase>
diff --git a/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js b/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js
index 98676ce0d2fee..124c94b0eb871 100644
--- a/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js
+++ b/fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js
@@ -3,12 +3,11 @@ import Iframe from '../../Iframe';
 const React = window.React;
 
 export default class ReorderedInputsTestCase extends React.Component {
-
-  state = { count: 0 };
+  state = {count: 0};
 
   componentDidMount() {
     this.interval = setInterval(() => {
-      this.setState({ count: this.state.count + 1 });
+      this.setState({count: this.state.count + 1});
     }, 2000);
   }
 
@@ -29,9 +28,7 @@ export default class ReorderedInputsTestCase extends React.Component {
 
   render() {
     return (
-      <TestCase
-        title="Reordered input elements in iframes"
-        description="">
+      <TestCase title="Reordered input elements in iframes" description="">
         <TestCase.Steps>
           <li>The two inputs below swap positions every two seconds</li>
           <li>Select the text in either of them</li>
@@ -40,10 +37,8 @@ export default class ReorderedInputsTestCase extends React.Component {
         <TestCase.ExpectedResult>
           The selection you made should be maintained
         </TestCase.ExpectedResult>
-        <Iframe height={50}>
-          {this.renderInputs()}
-        </Iframe>
+        <Iframe height={50}>{this.renderInputs()}</Iframe>
       </TestCase>
-    )
+    );
   }
 }
diff --git a/fixtures/dom/src/components/fixtures/selection-events/index.js b/fixtures/dom/src/components/fixtures/selection-events/index.js
index 2654789b7590a..75723e33ad0a0 100644
--- a/fixtures/dom/src/components/fixtures/selection-events/index.js
+++ b/fixtures/dom/src/components/fixtures/selection-events/index.js
@@ -5,7 +5,6 @@ import ReorderedInputsTestCase from './ReorderedInputsTestCase';
 import DraftJsEditorTestCase from './DraftJsEditorTestCase';
 const React = window.React;
 
-
 export default function SelectionEvents() {
   return (
     <FixtureSet
@@ -21,4 +20,4 @@ export default function SelectionEvents() {
       <DraftJsEditorTestCase />
     </FixtureSet>
   );
-};
+}
diff --git a/fixtures/dom/src/react-loader.js b/fixtures/dom/src/react-loader.js
index baa9ed6e13dd3..e725a9ca321fc 100644
--- a/fixtures/dom/src/react-loader.js
+++ b/fixtures/dom/src/react-loader.js
@@ -1,4 +1,4 @@
-import semver from 'semver'
+import semver from 'semver';
 
 /**
  * Take a version from the window query string and load a specific
@@ -41,14 +41,14 @@ export default function loadReact() {
   // @TODO We're using a build of draft-js provided by @acusti in https://github.com/facebook/react/pull/12037
   // This is because currently draft doesn't support iframes. This should be changed back to the official
   // release on unpkg once the draft fixes are merged.
-  const DRAFT_JS_PATH = 'https://cdn.rawgit.com/brandcast/draft-js-built/d6c2ffc64914b001411356c0bfab24e831bc5429/dist/Draft.js';
+  const DRAFT_JS_PATH =
+    'https://cdn.rawgit.com/brandcast/draft-js-built/d6c2ffc64914b001411356c0bfab24e831bc5429/dist/Draft.js';
   let REACT_PATH = 'react.development.js';
   let DOM_PATH = 'react-dom.development.js';
 
   let query = parseQuery(window.location.search);
   let version = query.version || 'local';
 
-
   if (version !== 'local') {
     const {major, minor, prerelease} = semver(version);
     const [preReleaseStage, preReleaseVersion] = prerelease;

From 799ee39f238040b9831c8ab6d8f05af2ed31c25e Mon Sep 17 00:00:00 2001
From: Brandon Dail <brandondail@fb.com>
Date: Mon, 12 Feb 2018 16:15:42 -0800
Subject: [PATCH 12/24] Add fixture for onSelect in iframes, remove DraftJS
 fixture

The DraftJs fixture wasn't really working in all supported browsers anyways, so just drop it and try to cover our bases without using it directly
---
 .../selection-events/DraftJsEditorTestCase.js | 40 -------------
 .../selection-events/OnSelectEventTestCase.js | 59 +++++++++++++++++++
 .../fixtures/selection-events/index.js        |  8 +--
 3 files changed, 62 insertions(+), 45 deletions(-)
 delete mode 100644 fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js
 create mode 100644 fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js

diff --git a/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js b/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js
deleted file mode 100644
index d478f17bc7d14..0000000000000
--- a/fixtures/dom/src/components/fixtures/selection-events/DraftJsEditorTestCase.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import TestCase from '../../TestCase';
-import Iframe from '../../Iframe';
-const React = window.React;
-const {EditorState, Editor} = window.Draft;
-
-export default class DraftJsEditorTestCase extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {editorState: EditorState.createEmpty()};
-    this.onChange = editorState => this.setState({editorState});
-  }
-  render() {
-    return (
-      <TestCase
-        title="Cursor Position in a Draft.js Editor"
-        description="Draft.js is a rich text editor system for React.
-        This verifies that the selection restoration functionality it depends on
-        works in an iframe.">
-        <TestCase.Steps>
-          <li>Enter some text into the Draft.js editor (grey outlined box)</li>
-          <li>
-            Change your cursor position to somewhere in the middle of the text
-          </li>
-          <li>Enter a new character</li>
-        </TestCase.Steps>
-        <TestCase.ExpectedResult>
-          The cursor should not jump positions
-        </TestCase.ExpectedResult>
-        <Iframe height={60}>
-          <div style={{border: '1px solid grey'}}>
-            <Editor
-              editorState={this.state.editorState}
-              onChange={this.onChange}
-            />
-          </div>
-        </Iframe>
-      </TestCase>
-    );
-  }
-}
diff --git a/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js b/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js
new file mode 100644
index 0000000000000..9e8fa8eae4c2f
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js
@@ -0,0 +1,59 @@
+import TestCase from '../../TestCase';
+import Iframe from '../../Iframe';
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+const {EditorState, Editor} = window.Draft;
+
+class OnSelectIframe extends React.Component {
+  state = {count: 0, value: 'Select Me!'};
+
+  _onSelect = event => {
+    this.setState(({count}) => ({count: count + 1}));
+  };
+
+  _onChange = event => {
+    this.setState({value: event.target.value});
+  };
+
+  render() {
+    const {count, value} = this.state;
+    return (
+      <Iframe height={60}>
+        Selection Event Count: {count}
+        <input
+          type="text"
+          onSelect={this._onSelect}
+          value={value}
+          onChange={this._onChange}
+        />
+      </Iframe>
+    );
+  }
+}
+
+export default class OnSelectEventTestCase extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {editorState: EditorState.createEmpty()};
+    this.onChange = editorState => {
+      this.setState({editorState});
+    };
+  }
+  render() {
+    return (
+      <TestCase
+        title="onSelect events within iframes"
+        description="onSelect events should fire for elements rendered inside iframes">
+        <TestCase.Steps>
+          <li>Highlight some of the text in the input below</li>
+          <li>Move the cursor around using the arrow keys</li>
+        </TestCase.Steps>
+        <TestCase.ExpectedResult>
+          The displayed count should increase as you highlight or move the
+          cursor
+        </TestCase.ExpectedResult>
+        <OnSelectIframe />
+      </TestCase>
+    );
+  }
+}
diff --git a/fixtures/dom/src/components/fixtures/selection-events/index.js b/fixtures/dom/src/components/fixtures/selection-events/index.js
index 75723e33ad0a0..8a9ead935d4ce 100644
--- a/fixtures/dom/src/components/fixtures/selection-events/index.js
+++ b/fixtures/dom/src/components/fixtures/selection-events/index.js
@@ -2,22 +2,20 @@ import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 import Iframe from '../../Iframe';
 import ReorderedInputsTestCase from './ReorderedInputsTestCase';
-import DraftJsEditorTestCase from './DraftJsEditorTestCase';
+import OnSelectEventTestCase from './OnSelectEventTestCase';
 const React = window.React;
 
 export default function SelectionEvents() {
   return (
     <FixtureSet
-      title="Selection Restoration in iframes"
+      title="Selection Restoration"
       description="
       When React commits changes it may perform operations which cause existing
       selection state to be lost. This is manually managed by reading the
       selection state before commits and then restoring it afterwards.
-      This selection restoration process should work for elements rendered in
-      iframes.
       ">
       <ReorderedInputsTestCase />
-      <DraftJsEditorTestCase />
+      <OnSelectEventTestCase />
     </FixtureSet>
   );
 }

From d1ad0166d677d1a3d8722ea9640f7a20be63c21c Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Mon, 2 Apr 2018 16:44:14 -0700
Subject: [PATCH 13/24] Purge remnants of draft.js from fixtures

---
 .../fixtures/selection-events/OnSelectEventTestCase.js   | 9 ---------
 .../src/components/fixtures/selection-events/index.js    | 2 --
 fixtures/dom/src/react-loader.js                         | 9 ---------
 3 files changed, 20 deletions(-)

diff --git a/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js b/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js
index 9e8fa8eae4c2f..beafd4e45320e 100644
--- a/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js
+++ b/fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js
@@ -1,8 +1,6 @@
 import TestCase from '../../TestCase';
 import Iframe from '../../Iframe';
 const React = window.React;
-const ReactDOM = window.ReactDOM;
-const {EditorState, Editor} = window.Draft;
 
 class OnSelectIframe extends React.Component {
   state = {count: 0, value: 'Select Me!'};
@@ -32,13 +30,6 @@ class OnSelectIframe extends React.Component {
 }
 
 export default class OnSelectEventTestCase extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {editorState: EditorState.createEmpty()};
-    this.onChange = editorState => {
-      this.setState({editorState});
-    };
-  }
   render() {
     return (
       <TestCase
diff --git a/fixtures/dom/src/components/fixtures/selection-events/index.js b/fixtures/dom/src/components/fixtures/selection-events/index.js
index 8a9ead935d4ce..10b33c290e6bb 100644
--- a/fixtures/dom/src/components/fixtures/selection-events/index.js
+++ b/fixtures/dom/src/components/fixtures/selection-events/index.js
@@ -1,6 +1,4 @@
 import FixtureSet from '../../FixtureSet';
-import TestCase from '../../TestCase';
-import Iframe from '../../Iframe';
 import ReorderedInputsTestCase from './ReorderedInputsTestCase';
 import OnSelectEventTestCase from './OnSelectEventTestCase';
 const React = window.React;
diff --git a/fixtures/dom/src/react-loader.js b/fixtures/dom/src/react-loader.js
index e725a9ca321fc..29afd0196cd5f 100644
--- a/fixtures/dom/src/react-loader.js
+++ b/fixtures/dom/src/react-loader.js
@@ -37,12 +37,6 @@ function loadScript(src) {
 }
 
 export default function loadReact() {
-  // const DRAFT_JS_PATH = 'https://unpkg.com/draft-js@0.10.5/dist/Draft.js';
-  // @TODO We're using a build of draft-js provided by @acusti in https://github.com/facebook/react/pull/12037
-  // This is because currently draft doesn't support iframes. This should be changed back to the official
-  // release on unpkg once the draft fixes are merged.
-  const DRAFT_JS_PATH =
-    'https://cdn.rawgit.com/brandcast/draft-js-built/d6c2ffc64914b001411356c0bfab24e831bc5429/dist/Draft.js';
   let REACT_PATH = 'react.development.js';
   let DOM_PATH = 'react-dom.development.js';
 
@@ -80,9 +74,6 @@ export default function loadReact() {
       window.ReactDOM = window.React;
     });
   }
-  request = request.then(() => loadScript(DRAFT_JS_PATH));
-  // We need Draft.js for the selection events fixture. It has to load
-  // after ReactDOM.
 
   return request;
 }

From 3c32963647638acb9bc0f70b23d7a0de547daaf7 Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Mon, 2 Apr 2018 16:44:58 -0700
Subject: [PATCH 14/24] Use prop-types import instead of window global

---
 fixtures/dom/src/components/Fixture.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fixtures/dom/src/components/Fixture.js b/fixtures/dom/src/components/Fixture.js
index ddf8b97231714..3643a65c36751 100644
--- a/fixtures/dom/src/components/Fixture.js
+++ b/fixtures/dom/src/components/Fixture.js
@@ -1,4 +1,4 @@
-const PropTypes = window.PropTypes;
+import PropTypes from 'prop-types';
 const React = window.React;
 
 const propTypes = {

From 3f7b5c519bbeece90e478bdb032e0f5c3c03b3ae Mon Sep 17 00:00:00 2001
From: Andrew Patton <andrew@acusti.ca>
Date: Mon, 2 Apr 2018 16:45:36 -0700
Subject: [PATCH 15/24] =?UTF-8?q?Make=20fixtures=E2=80=99=20Iframe=20compo?=
 =?UTF-8?q?nent=20Firefox-compatible?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fixtures/dom/src/components/Iframe.js | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/fixtures/dom/src/components/Iframe.js b/fixtures/dom/src/components/Iframe.js
index 8e9feb0e0485a..db5c4b25e1485 100644
--- a/fixtures/dom/src/components/Iframe.js
+++ b/fixtures/dom/src/components/Iframe.js
@@ -2,19 +2,25 @@ const React = window.React;
 const ReactDOM = window.ReactDOM;
 
 class IframePortal extends React.Component {
-  state = {ref: null};
+  iframeRef = null;
 
   handleRef = ref => {
-    if (ref !== this.state.ref) {
-      this.setState({ref});
-      if (ref && ref.contentDocument && this.props.head) {
-        ref.contentDocument.head.innerHTML = this.props.head;
+    if (ref !== this.iframeRef) {
+      this.iframeRef = ref;
+      if (ref) {
+        if (ref.contentDocument && this.props.head) {
+          ref.contentDocument.head.innerHTML = this.props.head;
+        }
+        // Re-render must take place in the next tick (Firefox)
+        setTimeout(() => {
+          this.forceUpdate();
+        });
       }
     }
   };
 
   render() {
-    const {ref} = this.state;
+    const ref = this.iframeRef;
     let portal = null;
     if (ref && ref.contentDocument) {
       portal = ReactDOM.createPortal(

From 4db5c4405c577ddcaa860be31d9022385c75d5df Mon Sep 17 00:00:00 2001
From: wilsonhyng <wilsonhyng@gmail.com>
Date: Mon, 16 Jul 2018 15:49:05 -0700
Subject: [PATCH 16/24] Fix switch case for SelectionEventsFixture

---
 fixtures/dom/src/components/fixtures/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/fixtures/dom/src/components/fixtures/index.js b/fixtures/dom/src/components/fixtures/index.js
index 4a6542845e239..3107f535f9e69 100644
--- a/fixtures/dom/src/components/fixtures/index.js
+++ b/fixtures/dom/src/components/fixtures/index.js
@@ -51,11 +51,11 @@ function FixturesPage() {
       return <MediaEventsFixtures />;
     case '/pointer-events':
       return <PointerEventsFixtures />;
+    case '/mouse-events':
+      return <MouseEventsFixtures />;
     case '/selection-events':
-    return <MouseEventsFixtures />;
+      return <SelectionEventsFixtures />;
     default:
-    return <SelectionEventsFixtures />;
-  case '/mouse-events':
       return <p>Please select a test fixture.</p>;
   }
 }

From ccf0329ed708f7c977e87e77551ef495c7742dca Mon Sep 17 00:00:00 2001
From: wilsonhyng <wilsonhyng@gmail.com>
Date: Tue, 17 Jul 2018 16:35:09 -0700
Subject: [PATCH 17/24] Remove draft.js / immutable.js dependencies

---
 fixtures/dom/package.json      | 1 -
 fixtures/dom/public/index.html | 1 -
 2 files changed, 2 deletions(-)

diff --git a/fixtures/dom/package.json b/fixtures/dom/package.json
index 87b765f42610a..ef92dbfe50e4c 100644
--- a/fixtures/dom/package.json
+++ b/fixtures/dom/package.json
@@ -8,7 +8,6 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "core-js": "^2.4.1",
-    "draft-js": "^0.10.5",
     "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
     "react": "^15.4.1",
diff --git a/fixtures/dom/public/index.html b/fixtures/dom/public/index.html
index b370c3c8eaefb..f6bb303c9a975 100644
--- a/fixtures/dom/public/index.html
+++ b/fixtures/dom/public/index.html
@@ -16,7 +16,6 @@
     <title>React App</title>
     <script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
     <script src="https://unpkg.com/expect@1.20.2/umd/expect.min.js"></script>
-    <script src="https://unpkg.com/immutable@3.8.2/dist/immutable.js"></script>
   </head>
   <body>
     <div id="root"></div>

From 2edf1f81f691f1d6610f6854bb67ed30587555c0 Mon Sep 17 00:00:00 2001
From: wilsonhyng <wilsonhyng@gmail.com>
Date: Tue, 17 Jul 2018 16:37:14 -0700
Subject: [PATCH 18/24] Cache owner doc as var to avoid reading it twice

---
 packages/react-dom/src/client/ReactDOMSelection.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-dom/src/client/ReactDOMSelection.js b/packages/react-dom/src/client/ReactDOMSelection.js
index 078316652f0a7..67c4d70253c21 100644
--- a/packages/react-dom/src/client/ReactDOMSelection.js
+++ b/packages/react-dom/src/client/ReactDOMSelection.js
@@ -14,8 +14,9 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
  * @return {?object}
  */
 export function getOffsets(outerNode) {
+  const { ownerDocument } = outerNode;  
   const win =
-    (outerNode.ownerDocument && outerNode.ownerDocument.defaultView) || window;
+    (ownerDocument && ownerDocument.defaultView) || window;
   const selection = win.getSelection && win.getSelection();
 
   if (!selection || selection.rangeCount === 0) {

From db02b65dd0ad1a8e3eaee5f1aa2cc06a944c2fbf Mon Sep 17 00:00:00 2001
From: wilsonhyng <wilsonhyng@gmail.com>
Date: Wed, 18 Jul 2018 10:56:06 -0700
Subject: [PATCH 19/24] Add documentation for getActiveElementDeep to explain
 try/catch

Add documentation for getActiveElementDeep to explain try/catch
---
 packages/react-dom/src/client/ReactInputSelection.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index 772991a79c7e4..3cd97d6df306a 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -60,6 +60,8 @@ function getActiveElementDeep() {
   let win = window;
   let element = getActiveElement();
   while (element instanceof win.HTMLIFrameElement) {
+    // Accessing the contentDocument of a HTMLIframeElement can cause the browser
+    // to throw, e.g. if the src is not in the same domains the parent document
     try {
       win = element.contentDocument.defaultView;
     } catch (e) {

From 75b99925462d1c218d5cf2e5588b4be84403468c Mon Sep 17 00:00:00 2001
From: wilsonhyng <wilsonhyng@gmail.com>
Date: Tue, 24 Jul 2018 14:14:50 -0700
Subject: [PATCH 20/24] Ensure getActiveElement always returns DOM element

---
 .../react-dom/src/client/ReactInputSelection.js     |  3 +--
 packages/react-dom/src/client/getActiveElement.js   | 13 ++++++-------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index 3cd97d6df306a..b29ac8b8e7ee1 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -50,7 +50,6 @@ function containsNode(outerNode, innerNode) {
 
 function isInDocument(node) {
   return (
-    node &&
     node.ownerDocument &&
     containsNode(node.ownerDocument.documentElement, node)
   );
@@ -85,7 +84,7 @@ function getActiveElementDeep() {
  * and `selectionEnd` rows.
  */
 export function hasSelectionCapabilities(elem) {
-  const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
+  const nodeName = elem.nodeName && elem.nodeName.toLowerCase();
   return (
     nodeName &&
     ((nodeName === 'input' &&
diff --git a/packages/react-dom/src/client/getActiveElement.js b/packages/react-dom/src/client/getActiveElement.js
index fe824110f0a0a..92d5d23eb9c7a 100644
--- a/packages/react-dom/src/client/getActiveElement.js
+++ b/packages/react-dom/src/client/getActiveElement.js
@@ -7,14 +7,13 @@
  * @flow
  */
 
-export default function getActiveElement(doc: ?Document): ?Element {
-  doc = doc || (typeof document !== 'undefined' ? document : undefined);
-  if (typeof doc === 'undefined') {
-    return null;
-  }
+export default function getActiveElement(doc?: ?Document): Element {
+  doc = doc || document;
+  // To account for edge cases in which document.body could be null  
+  const body = doc.body || doc.createElement('body');
   try {
-    return doc.activeElement || doc.body;
+    return doc.activeElement || body;
   } catch (e) {
-    return doc.body;
+    return body;
   }
 }

From 0f1de45799bb1ed2b39746ed58335f328a0e1444 Mon Sep 17 00:00:00 2001
From: wilsonhyng <wilsonhyng@gmail.com>
Date: Tue, 24 Jul 2018 14:15:05 -0700
Subject: [PATCH 21/24] Tighten up isNode and isTextNode

---
 .../src/client/ReactInputSelection.js         | 22 +++----------------
 1 file changed, 3 insertions(+), 19 deletions(-)

diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index b29ac8b8e7ee1..b86463e2e1eef 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -9,25 +9,9 @@ import getActiveElement from './getActiveElement';
 
 import * as ReactDOMSelection from './ReactDOMSelection';
 import {ELEMENT_NODE, TEXT_NODE} from '../shared/HTMLNodeType';
-
-// TODO: this code is originally inlined from fbjs.
-// It is likely that we don't actually need all these checks
-// for the particular use case in this file.
-function isNode(object) {
-  const doc = object ? object.ownerDocument || object : document;
-  const defaultView = doc.defaultView || window;
-  return !!(
-    object &&
-    (typeof defaultView.Node === 'function'
-      ? object instanceof defaultView.Node
-      : typeof object === 'object' &&
-        typeof object.nodeType === 'number' &&
-        typeof object.nodeName === 'string')
-  );
-}
-
-function isTextNode(object) {
-  return isNode(object) && object.nodeType === TEXT_NODE;
+  
+function isTextNode(node) {
+  return node && node.nodeType === TEXT_NODE;
 }
 
 function containsNode(outerNode, innerNode) {

From 95b2aef707a1feef6207c5d52acb99a7cbbfac54 Mon Sep 17 00:00:00 2001
From: wilsonhyng <wilsonhyng@gmail.com>
Date: Tue, 24 Jul 2018 14:24:18 -0700
Subject: [PATCH 22/24] Remove ie8 compatibility

---
 .../react-dom/src/client/ReactDOMSelection.js    |  9 ++-------
 .../react-dom/src/client/ReactInputSelection.js  |  5 ++---
 .../react-dom/src/client/getActiveElement.js     |  2 +-
 .../react-dom/src/events/SelectEventPlugin.js    | 16 +++++++---------
 4 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMSelection.js b/packages/react-dom/src/client/ReactDOMSelection.js
index 67c4d70253c21..e0b90d8b8a2ad 100644
--- a/packages/react-dom/src/client/ReactDOMSelection.js
+++ b/packages/react-dom/src/client/ReactDOMSelection.js
@@ -14,9 +14,8 @@ import {TEXT_NODE} from '../shared/HTMLNodeType';
  * @return {?object}
  */
 export function getOffsets(outerNode) {
-  const { ownerDocument } = outerNode;  
-  const win =
-    (ownerDocument && ownerDocument.defaultView) || window;
+  const {ownerDocument} = outerNode;
+  const win = (ownerDocument && ownerDocument.defaultView) || window;
   const selection = win.getSelection && win.getSelection();
 
   if (!selection || selection.rangeCount === 0) {
@@ -155,10 +154,6 @@ export function getModernOffsetsFromPoints(
 export function setOffsets(node, offsets) {
   const doc = node.ownerDocument || document;
   const win = doc ? doc.defaultView : window;
-  if (!win.getSelection) {
-    return;
-  }
-
   const selection = win.getSelection();
   const length = node[getTextContentAccessor()].length;
   let start = Math.min(offsets.start, length);
diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index b86463e2e1eef..5fb8cf94b4d50 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -9,7 +9,7 @@ import getActiveElement from './getActiveElement';
 
 import * as ReactDOMSelection from './ReactDOMSelection';
 import {ELEMENT_NODE, TEXT_NODE} from '../shared/HTMLNodeType';
-  
+
 function isTextNode(node) {
   return node && node.nodeType === TEXT_NODE;
 }
@@ -34,8 +34,7 @@ function containsNode(outerNode, innerNode) {
 
 function isInDocument(node) {
   return (
-    node.ownerDocument &&
-    containsNode(node.ownerDocument.documentElement, node)
+    node.ownerDocument && containsNode(node.ownerDocument.documentElement, node)
   );
 }
 
diff --git a/packages/react-dom/src/client/getActiveElement.js b/packages/react-dom/src/client/getActiveElement.js
index 92d5d23eb9c7a..bcf8af17fc259 100644
--- a/packages/react-dom/src/client/getActiveElement.js
+++ b/packages/react-dom/src/client/getActiveElement.js
@@ -9,7 +9,7 @@
 
 export default function getActiveElement(doc?: ?Document): Element {
   doc = doc || document;
-  // To account for edge cases in which document.body could be null  
+  // To account for edge cases in which document.body could be null
   const body = doc.body || doc.createElement('body');
   try {
     return doc.activeElement || body;
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index 5c89f6f0b2190..68f059cab600b 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -75,15 +75,13 @@ function getSelection(node) {
   } else {
     const win =
       (node.ownerDocument && node.ownerDocument.defaultView) || window;
-    if (win.getSelection) {
-      const selection = win.getSelection();
-      return {
-        anchorNode: selection.anchorNode,
-        anchorOffset: selection.anchorOffset,
-        focusNode: selection.focusNode,
-        focusOffset: selection.focusOffset,
-      };
-    }
+    const selection = win.getSelection();
+    return {
+      anchorNode: selection.anchorNode,
+      anchorOffset: selection.anchorOffset,
+      focusNode: selection.focusNode,
+      focusOffset: selection.focusOffset,
+    };
   }
 }
 

From d997ba8ee18d39c308d65f07b080ec45bae8ba27 Mon Sep 17 00:00:00 2001
From: wilsonhyng <wilsonhyng@gmail.com>
Date: Thu, 2 Aug 2018 11:38:51 -0700
Subject: [PATCH 23/24] Specify cross-origin example in getActiveElementDeep

---
 packages/react-dom/src/client/ReactInputSelection.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index 5fb8cf94b4d50..fee20672bf875 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -43,7 +43,7 @@ function getActiveElementDeep() {
   let element = getActiveElement();
   while (element instanceof win.HTMLIFrameElement) {
     // Accessing the contentDocument of a HTMLIframeElement can cause the browser
-    // to throw, e.g. if the src is not in the same domains the parent document
+    // to throw, e.g. if it has a cross-origin src attribute
     try {
       win = element.contentDocument.defaultView;
     } catch (e) {

From e63391ce0a87eab374695dbd296536990f3e31d4 Mon Sep 17 00:00:00 2001
From: wilsonhyng <wilsonhyng@gmail.com>
Date: Thu, 2 Aug 2018 11:39:15 -0700
Subject: [PATCH 24/24] Revert back to returning null if document is not
 defined

---
 .../react-dom/src/client/ReactInputSelection.js     |  6 ++++--
 packages/react-dom/src/client/getActiveElement.js   | 13 +++++++------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index fee20672bf875..3f4a6938da6dd 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -34,7 +34,9 @@ function containsNode(outerNode, innerNode) {
 
 function isInDocument(node) {
   return (
-    node.ownerDocument && containsNode(node.ownerDocument.documentElement, node)
+    node &&
+    node.ownerDocument &&
+    containsNode(node.ownerDocument.documentElement, node)
   );
 }
 
@@ -67,7 +69,7 @@ function getActiveElementDeep() {
  * and `selectionEnd` rows.
  */
 export function hasSelectionCapabilities(elem) {
-  const nodeName = elem.nodeName && elem.nodeName.toLowerCase();
+  const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
   return (
     nodeName &&
     ((nodeName === 'input' &&
diff --git a/packages/react-dom/src/client/getActiveElement.js b/packages/react-dom/src/client/getActiveElement.js
index bcf8af17fc259..fe824110f0a0a 100644
--- a/packages/react-dom/src/client/getActiveElement.js
+++ b/packages/react-dom/src/client/getActiveElement.js
@@ -7,13 +7,14 @@
  * @flow
  */
 
-export default function getActiveElement(doc?: ?Document): Element {
-  doc = doc || document;
-  // To account for edge cases in which document.body could be null
-  const body = doc.body || doc.createElement('body');
+export default function getActiveElement(doc: ?Document): ?Element {
+  doc = doc || (typeof document !== 'undefined' ? document : undefined);
+  if (typeof doc === 'undefined') {
+    return null;
+  }
   try {
-    return doc.activeElement || body;
+    return doc.activeElement || doc.body;
   } catch (e) {
-    return body;
+    return doc.body;
   }
 }