From c9515d3ca83a86846bcbe497c93e7fe1a35f25c6 Mon Sep 17 00:00:00 2001
From: Spyros Ioakeimidis <spyrosikmd@gmail.com>
Date: Thu, 1 Feb 2018 20:44:45 +0100
Subject: [PATCH] Extend input type check in selection capabilities (#12062)

When an email input was replaced by a disabled text input on the same
DOM position, an error would occur when trying to `setSelection`. The
reason was that in `getSelectionInformation` the `selectionRange` was
set to `null` as `hasSelectionCapabilities` was returning `false` for
an `email` input type.

`email` and `tel` input types do have selection capabilities, so in
that case, `hasSelectionCapabilities` should return `true`.
---
 .../fixtures/text-inputs/ReplaceEmailInput.js | 33 +++++++++++++++++++
 .../components/fixtures/text-inputs/index.js  | 16 +++++++++
 .../src/client/ReactInputSelection.js         |  3 +-
 scripts/rollup/results.json                   | 24 +++++++-------
 4 files changed, 63 insertions(+), 13 deletions(-)
 create mode 100644 fixtures/dom/src/components/fixtures/text-inputs/ReplaceEmailInput.js

diff --git a/fixtures/dom/src/components/fixtures/text-inputs/ReplaceEmailInput.js b/fixtures/dom/src/components/fixtures/text-inputs/ReplaceEmailInput.js
new file mode 100644
index 0000000000000..db9da5c9efa27
--- /dev/null
+++ b/fixtures/dom/src/components/fixtures/text-inputs/ReplaceEmailInput.js
@@ -0,0 +1,33 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class ReplaceEmailInput extends React.Component {
+  state = {
+    formSubmitted: false,
+  };
+
+  render() {
+    return (
+      <Fixture>
+        <form
+          className="control-box"
+          onSubmit={event => {
+            event.preventDefault();
+            this.setState({formSubmitted: true});
+          }}>
+          <fieldset>
+            <legend>Email</legend>
+            {!this.state.formSubmitted ? (
+              <input type="email" />
+            ) : (
+              <input type="text" disabled={true} />
+            )}
+          </fieldset>
+        </form>
+      </Fixture>
+    );
+  }
+}
+
+export default ReplaceEmailInput;
diff --git a/fixtures/dom/src/components/fixtures/text-inputs/index.js b/fixtures/dom/src/components/fixtures/text-inputs/index.js
index af71edcbb5cbf..9dffa628f7519 100644
--- a/fixtures/dom/src/components/fixtures/text-inputs/index.js
+++ b/fixtures/dom/src/components/fixtures/text-inputs/index.js
@@ -2,6 +2,7 @@ import Fixture from '../../Fixture';
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 import InputTestCase from './InputTestCase';
+import ReplaceEmailInput from './ReplaceEmailInput';
 
 const React = window.React;
 
@@ -110,6 +111,21 @@ class TextInputFixtures extends React.Component {
           <InputTestCase type="url" defaultValue="" />
         </TestCase>
 
+        <TestCase
+          title="Replacing email input with text disabled input"
+          relatedIssues="12062">
+          <TestCase.Steps>
+            <li>Type "test@test.com"</li>
+            <li>Press enter</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            There should be no selection-related error in the console.
+          </TestCase.ExpectedResult>
+
+          <ReplaceEmailInput />
+        </TestCase>
+
         <TestCase title="All inputs" description="General test of all inputs">
           <InputTestCase type="text" defaultValue="Text" />
           <InputTestCase type="email" defaultValue="user@example.com" />
diff --git a/packages/react-dom/src/client/ReactInputSelection.js b/packages/react-dom/src/client/ReactInputSelection.js
index 506153a118053..89d349d4d158d 100644
--- a/packages/react-dom/src/client/ReactInputSelection.js
+++ b/packages/react-dom/src/client/ReactInputSelection.js
@@ -26,7 +26,8 @@ export function hasSelectionCapabilities(elem) {
   const nodeName = elem && elem.nodeName && elem.nodeName.toLowerCase();
   return (
     nodeName &&
-    ((nodeName === 'input' && elem.type === 'text') ||
+    ((nodeName === 'input' &&
+      (elem.type === 'text' || elem.type === 'email' || elem.type === 'tel')) ||
       nodeName === 'textarea' ||
       elem.contentEditable === 'true')
   );
diff --git a/scripts/rollup/results.json b/scripts/rollup/results.json
index 2ff360a8897d0..0ce242d4bc18f 100644
--- a/scripts/rollup/results.json
+++ b/scripts/rollup/results.json
@@ -46,43 +46,43 @@
       "filename": "react-dom.development.js",
       "bundleType": "UMD_DEV",
       "packageName": "react-dom",
-      "size": 591035,
-      "gzip": 138248
+      "size": 591085,
+      "gzip": 138261
     },
     {
       "filename": "react-dom.production.min.js",
       "bundleType": "UMD_PROD",
       "packageName": "react-dom",
-      "size": 96636,
-      "gzip": 31413
+      "size": 96672,
+      "gzip": 31416
     },
     {
       "filename": "react-dom.development.js",
       "bundleType": "NODE_DEV",
       "packageName": "react-dom",
-      "size": 575044,
-      "gzip": 134405
+      "size": 575094,
+      "gzip": 134415
     },
     {
       "filename": "react-dom.production.min.js",
       "bundleType": "NODE_PROD",
       "packageName": "react-dom",
-      "size": 95362,
-      "gzip": 30593
+      "size": 95398,
+      "gzip": 30619
     },
     {
       "filename": "ReactDOM-dev.js",
       "bundleType": "FB_DEV",
       "packageName": "react-dom",
-      "size": 594192,
-      "gzip": 136733
+      "size": 594248,
+      "gzip": 136750
     },
     {
       "filename": "ReactDOM-prod.js",
       "bundleType": "FB_PROD",
       "packageName": "react-dom",
-      "size": 278297,
-      "gzip": 53015
+      "size": 278353,
+      "gzip": 53028
     },
     {
       "filename": "react-dom-test-utils.development.js",