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/dom/src/components/fixtures/text-inputs/index.js

@@ -6,6 +6,10 @@ import InputTestCase from './InputTestCase';
 const React = window.React;
 
 class TextInputFixtures extends React.Component {
+  state = {
+    formSubmitted: false,
+  };
+
   render() {
     return (
       <FixtureSet
@@ -110,6 +114,37 @@ 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>
+
+          <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>
+        </TestCase>
+
         <TestCase title="All inputs" description="General test of all inputs">
           <InputTestCase type="text" defaultValue="Text" />
           <InputTestCase type="email" defaultValue="user@example.com" />

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' &&
+      ['text', 'email', 'tel'].indexOf(elem.type) >= 0) ||
       nodeName === 'textarea' ||
       elem.contentEditable === 'true')
   );