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`.

Author: spirosikmd

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;

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 "[email protected]"</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="[email protected]" />

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')
   );

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",