Skip to content

Commit

Permalink
Use strict equality as a guard before assigning input.value
Browse files Browse the repository at this point in the history
This commit adds back the guard around assigning the value property to
an input, however it does it using a strict equals. This prevents
validated inputs, like emails and urls from losing the cursor
position.

It also adds associated test fixtures.
  • Loading branch information
nhunzaker committed May 3, 2017
1 parent 0df1709 commit 3e1a768
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 4 deletions.
28 changes: 28 additions & 0 deletions fixtures/dom/src/components/fixtures/text-inputs/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,34 @@ class TextInputFixtures extends React.Component {
</p>
</TestCase>

<TestCase title="Cursor when editing email inputs">
<TestCase.Steps>
<li>Type "user@example.com"</li>
<li>Select "@"</li>
<li>Type ".", to replace "@" with a period</li>
</TestCase.Steps>

<TestCase.ExpectedResult>
The text field's cursor should not jump to the end.
</TestCase.ExpectedResult>

<InputTestCase type="email" defaultValue="" />
</TestCase>

<TestCase title="Cursor when editing url inputs">
<TestCase.Steps>
<li>Type "http://www.example.com"</li>
<li>Select "www."</li>
<li>Press backspace/delete</li>
</TestCase.Steps>

<TestCase.ExpectedResult>
The text field's cursor should not jump to the end.
</TestCase.ExpectedResult>

<InputTestCase type="url" defaultValue="" />
</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: 1 addition & 2 deletions src/renderers/dom/fiber/wrappers/ReactDOMFiberInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -209,8 +209,7 @@ var ReactDOMInput = {
// browsers typically do this as necessary, jsdom doesn't.
node.value = '' + value;
}
// eslint-disable-next-line
} else {
} else if (node.value !== value) {
// Cast `value` to a string to ensure the value is set correctly. While
// browsers typically do this as necessary, jsdom doesn't.
node.value = '' + value;
Expand Down
3 changes: 1 addition & 2 deletions src/renderers/dom/stack/client/wrappers/ReactDOMInput.js
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,7 @@ var ReactDOMInput = {
// browsers typically do this as necessary, jsdom doesn't.
node.value = '' + value;
}
// eslint-disable-next-line
} else {
} else if (node.value !== value) {
// Cast `value` to a string to ensure the value is set correctly. While
// browsers typically do this as necessary, jsdom doesn't.
node.value = '' + value;
Expand Down

0 comments on commit 3e1a768

Please sign in to comment.