Skip to content

Commit

Permalink
Extend input type check in selection capabilities (#12062)
Browse files Browse the repository at this point in the history
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`.
  • Loading branch information
spirosikmd committed Feb 2, 2018
1 parent 885a291 commit aa115f7
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 13 deletions.
@@ -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;
16 changes: 16 additions & 0 deletions fixtures/dom/src/components/fixtures/text-inputs/index.js
Expand Up @@ -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;

Expand Down Expand Up @@ -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" />
Expand Down
3 changes: 2 additions & 1 deletion packages/react-dom/src/client/ReactInputSelection.js
Expand Up @@ -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')
);
Expand Down
24 changes: 12 additions & 12 deletions scripts/rollup/results.json
Expand Up @@ -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",
Expand Down

0 comments on commit aa115f7

Please sign in to comment.