Skip to content

Commit

Permalink
Do not set selection when prior selection is undefined (facebook#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 Apr 7, 2018
1 parent 6bf2797 commit b4993d7
Show file tree
Hide file tree
Showing 4 changed files with 173 additions and 116 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
Loading

0 comments on commit b4993d7

Please sign in to comment.