-
Notifications
You must be signed in to change notification settings - Fork 47k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix Chrome number input backspace and invalid input issue #7359
Merged
Merged
Changes from all commits
Commits
Show all changes
31 commits
Select commit
Hold shift + click to select a range
0c8f935
Only re-assign defaultValue if it is different
nhunzaker 8654886
Do not set value if it is the same
nhunzaker 0addf2b
Properly cover defaultValue
nhunzaker 1845151
Use coercion to be smart about value assignment
nhunzaker 1e78559
Add explanation of loose type checks in value assignment.
nhunzaker 8ceb1f4
Add test coverage for setAttribute update.
nhunzaker c56f548
Only apply loose value check to text inputs
nhunzaker 2af7e15
Fix case where empty switches to zero
nhunzaker a00150e
Handle zero case in controlled input
nhunzaker 6e8c818
Correct mistake with default value assignment after rebase
nhunzaker 60eef17
Do not assign bad input to number input
nhunzaker 7bd5551
Only trigger number input value attribute updates on blur
nhunzaker 36459b9
Remove reference to LinkedValueUtils
nhunzaker b642d92
Record new fiber tests
nhunzaker 99e87b8
Add tests for blurred number input behavior
nhunzaker b2085f4
Replace onBlur wrapper with rule in ChangeEventPlugin
nhunzaker b0bc9d4
Sift down to only number inputs
nhunzaker 4fc8c2e
Re-record fiber tests
nhunzaker d410290
Add test case for updating attribute on uncontrolled inputs. Make rel…
nhunzaker 1e69612
Handle uncontrolled inputs, integrate fiber
nhunzaker d181202
Reorder boolean to mitigate DOM checks
nhunzaker 9beadf0
Only assign value if it is different
nhunzaker aa30507
Add number input browser test fixtures
nhunzaker c44a87a
Address edge case preventing number precision lower than 1 place
nhunzaker d0441cc
Accommodate lack of IE9 number input support
nhunzaker 38a583f
Remove footnotes about IE exponent issues
nhunzaker 71d7f45
Address exception in IE9/10 ChangeEventPlugin blur event
nhunzaker 6fe3372
Migrate over ReactDOMInput.js number input fixes to Fiber
nhunzaker d7f9b4e
Update number fixtures to use latest components
nhunzaker 4a3eeca
Add number input test case for dashes and negative numbers
nhunzaker 7cb979f
Replace trailing dash test case with replace with dash
nhunzaker File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
fixtures/dom/src/components/fixtures/number-inputs/NumberTestCase.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
const React = window.React; | ||
|
||
import Fixture from '../../Fixture'; | ||
|
||
const NumberTestCase = React.createClass({ | ||
getInitialState() { | ||
return { value: '' }; | ||
}, | ||
onChange(event) { | ||
const parsed = parseFloat(event.target.value, 10) | ||
const value = isNaN(parsed) ? '' : parsed | ||
|
||
this.setState({ value }) | ||
}, | ||
render() { | ||
return ( | ||
<Fixture> | ||
<div>{this.props.children}</div> | ||
|
||
<div className="control-box"> | ||
<fieldset> | ||
<legend>Controlled</legend> | ||
<input type="number" value={this.state.value} onChange={this.onChange} /> | ||
<span className="hint"> Value: {JSON.stringify(this.state.value)}</span> | ||
</fieldset> | ||
|
||
<fieldset> | ||
<legend>Uncontrolled</legend> | ||
<input type="number" defaultValue={0.5} /> | ||
</fieldset> | ||
</div> | ||
</Fixture> | ||
); | ||
}, | ||
}); | ||
|
||
export default NumberTestCase; |
167 changes: 167 additions & 0 deletions
167
fixtures/dom/src/components/fixtures/number-inputs/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,167 @@ | ||
const React = window.React; | ||
|
||
import FixtureSet from '../../FixtureSet'; | ||
import TestCase from '../../TestCase'; | ||
import NumberTestCase from './NumberTestCase'; | ||
|
||
const NumberInputs = React.createClass({ | ||
render() { | ||
return ( | ||
<FixtureSet | ||
title="Number inputs" | ||
description="Number inputs inconsistently assign and report the value | ||
property depending on the browser." | ||
> | ||
<TestCase | ||
title="Backspacing" | ||
description="The decimal place should not be lost" | ||
> | ||
<TestCase.Steps> | ||
<li>Type "3.1"</li> | ||
<li>Press backspace, eliminating the "1"</li> | ||
</TestCase.Steps> | ||
|
||
<TestCase.ExpectedResult> | ||
The field should read "3.", preserving the decimal place | ||
</TestCase.ExpectedResult> | ||
|
||
<NumberTestCase /> | ||
|
||
<p className="footnote"> | ||
<b>Notes:</b> Chrome and Safari clear trailing | ||
decimals on blur. React makes this concession so that the | ||
value attribute remains in sync with the value property. | ||
</p> | ||
</TestCase> | ||
|
||
<TestCase | ||
title="Decimal precision" | ||
description="Supports decimal precision greater than 2 places" | ||
> | ||
<TestCase.Steps> | ||
<li>Type "0.01"</li> | ||
</TestCase.Steps> | ||
|
||
<TestCase.ExpectedResult> | ||
The field should read "0.01" | ||
</TestCase.ExpectedResult> | ||
|
||
<NumberTestCase /> | ||
</TestCase> | ||
|
||
<TestCase | ||
title="Exponent form" | ||
description="Supports exponent form ('2e4')" | ||
> | ||
<TestCase.Steps> | ||
<li>Type "2e"</li> | ||
<li>Type 4, to read "2e4"</li> | ||
</TestCase.Steps> | ||
|
||
<TestCase.ExpectedResult> | ||
The field should read "2e4". The parsed value should read "20000" | ||
</TestCase.ExpectedResult> | ||
|
||
<NumberTestCase /> | ||
</TestCase> | ||
|
||
<TestCase | ||
title="Exponent Form" | ||
description="Pressing 'e' at the end" | ||
> | ||
<TestCase.Steps> | ||
<li>Type "3.14"</li> | ||
<li>Press "e", so that the input reads "3.14e"</li> | ||
</TestCase.Steps> | ||
|
||
<TestCase.ExpectedResult> | ||
The field should read "3.14e", the parsed value should be empty | ||
</TestCase.ExpectedResult> | ||
|
||
<NumberTestCase /> | ||
</TestCase> | ||
|
||
<TestCase | ||
title="Exponent Form" | ||
description="Supports pressing 'ee' in the middle of a number" | ||
> | ||
<TestCase.Steps> | ||
<li>Type "3.14"</li> | ||
<li>Move the text cursor to after the decimal place</li> | ||
<li>Press "e" twice, so that the value reads "3.ee14"</li> | ||
</TestCase.Steps> | ||
|
||
<TestCase.ExpectedResult> | ||
The field should read "3.ee14" | ||
</TestCase.ExpectedResult> | ||
|
||
<NumberTestCase /> | ||
</TestCase> | ||
|
||
<TestCase | ||
title="Trailing Zeroes" | ||
description="Typing '3.0' preserves the trailing zero" | ||
> | ||
<TestCase.Steps> | ||
<li>Type "3.0"</li> | ||
</TestCase.Steps> | ||
|
||
<TestCase.ExpectedResult> | ||
The field should read "3.0" | ||
</TestCase.ExpectedResult> | ||
|
||
<NumberTestCase /> | ||
</TestCase> | ||
|
||
<TestCase | ||
title="Inserting decimals precision" | ||
description="Inserting '.' in to '300' maintains the trailing zeroes" | ||
> | ||
<TestCase.Steps> | ||
<li>Type "300"</li> | ||
<li>Move the cursor to after the "3"</li> | ||
<li>Type "."</li> | ||
</TestCase.Steps> | ||
|
||
<TestCase.ExpectedResult> | ||
The field should read "3.00", not "3" | ||
</TestCase.ExpectedResult> | ||
<NumberTestCase /> | ||
</TestCase> | ||
|
||
<TestCase | ||
title="Replacing numbers with -" | ||
description="Replacing a number with the '-' sign should not clear the value" | ||
> | ||
<TestCase.Steps> | ||
<li>Type "3"</li> | ||
<li>Select the entire value"</li> | ||
<li>Type '-' to replace '3' with '-'</li> | ||
</TestCase.Steps> | ||
|
||
<TestCase.ExpectedResult> | ||
The field should read "-", not be blank. | ||
</TestCase.ExpectedResult> | ||
<NumberTestCase /> | ||
</TestCase> | ||
|
||
<TestCase | ||
title="Negative numbers" | ||
description="Typing minus when inserting a negative number should work" | ||
> | ||
<TestCase.Steps> | ||
<li>Type "-"</li> | ||
<li>Type '3'</li> | ||
</TestCase.Steps> | ||
|
||
<TestCase.ExpectedResult> | ||
The field should read "-3". | ||
</TestCase.ExpectedResult> | ||
<NumberTestCase /> | ||
</TestCase> | ||
</FixtureSet> | ||
); | ||
}, | ||
}); | ||
|
||
export default NumberInputs; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hmm, I wonder why this was dev-only in the first place?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It was only used for warnings. We intentionally want to minimize state and memory usage associated with controlled components. The goal is to get rid of the entire wrapper object. Making this a prod dependency makes that harder.