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,29 @@ 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,7 @@ 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')
   );