Skip to content

Commit

Permalink
Do not set selection when prior selection is undefined (#12062)
Browse files Browse the repository at this point in the history
`restoreSelection` did not account for input elements that have changed
type after the commit phase. The new `text` input supported selection
but the old `email` did not and `setSelection` was incorrectly trying to
restore `null` selection state.

We also extend input type check in selection capabilities to cover cases
where input type is `search`, `tel`, `url`, or `password`.
  • Loading branch information
spirosikmd committed Feb 15, 2018
1 parent 5cd5f63 commit bc7d887
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 26 deletions.
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
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
12 changes: 10 additions & 2 deletions packages/react-dom/src/client/ReactInputSelection.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,12 @@ 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 === 'search' ||
elem.type === 'tel' ||
elem.type === 'url' ||
elem.type === 'password')) ||
nodeName === 'textarea' ||
elem.contentEditable === 'true')
);
Expand All @@ -52,7 +57,10 @@ export function restoreSelection(priorSelectionInformation) {
const priorFocusedElem = priorSelectionInformation.focusedElem;
const priorSelectionRange = priorSelectionInformation.selectionRange;
if (curFocusedElem !== priorFocusedElem && isInDocument(priorFocusedElem)) {
if (hasSelectionCapabilities(priorFocusedElem)) {
if (
priorSelectionRange !== null &&
hasSelectionCapabilities(priorFocusedElem)
) {
setSelection(priorFocusedElem, priorSelectionRange);
}

Expand Down
48 changes: 24 additions & 24 deletions scripts/rollup/results.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,43 +46,43 @@
"filename": "react-dom.development.js",
"bundleType": "UMD_DEV",
"packageName": "react-dom",
"size": 591513,
"gzip": 138743
"size": 591647,
"gzip": 138778
},
{
"filename": "react-dom.production.min.js",
"bundleType": "UMD_PROD",
"packageName": "react-dom",
"size": 96778,
"gzip": 31445
"size": 96862,
"gzip": 31467
},
{
"filename": "react-dom.development.js",
"bundleType": "NODE_DEV",
"packageName": "react-dom",
"size": 575526,
"gzip": 134516
"size": 575660,
"gzip": 134558
},
{
"filename": "react-dom.production.min.js",
"bundleType": "NODE_PROD",
"packageName": "react-dom",
"size": 95503,
"gzip": 30619
"size": 95587,
"gzip": 30644
},
{
"filename": "ReactDOM-dev.js",
"bundleType": "FB_DEV",
"packageName": "react-dom",
"size": 594783,
"gzip": 136782
"size": 594973,
"gzip": 136823
},
{
"filename": "ReactDOM-prod.js",
"bundleType": "FB_PROD",
"packageName": "react-dom",
"size": 279046,
"gzip": 53062
"size": 279248,
"gzip": 53103
},
{
"filename": "react-dom-test-utils.development.js",
Expand Down Expand Up @@ -401,31 +401,31 @@
},
{
"filename": "react-is.development.js",
"bundleType": "NODE_DEV",
"bundleType": "UMD_DEV",
"packageName": "react-is",
"size": 3358,
"gzip": 1015
"size": 3547,
"gzip": 1071
},
{
"filename": "react-is.production.min.js",
"bundleType": "NODE_PROD",
"bundleType": "UMD_PROD",
"packageName": "react-is",
"size": 1433,
"gzip": 607
"size": 1515,
"gzip": 670
},
{
"filename": "react-is.development.js",
"bundleType": "UMD_DEV",
"bundleType": "NODE_DEV",
"packageName": "react-is",
"size": 3547,
"gzip": 1071
"size": 3358,
"gzip": 1015
},
{
"filename": "react-is.production.min.js",
"bundleType": "UMD_PROD",
"bundleType": "NODE_PROD",
"packageName": "react-is",
"size": 1515,
"gzip": 670
"size": 1433,
"gzip": 607
}
]
}

0 comments on commit bc7d887

Please sign in to comment.