Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Remove loose check on non-number controlled inputs. Fix trailing dot …
…issue. (#9584) * Remove loose check when assigning non-number inputs This commit removes a check I added when working on number input issues where we perform a loose check on an input's value before we assign it. This prevented controlled text inputs from disallowing numeric text entry. I also added a DOM fixture text case. Related issues: #9561 (comment) * Use strict equality as a guard before assigning input.value 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. * Add copy command after build for interup with surge.sh
- Loading branch information
Showing
7 changed files
with
203 additions
and
56 deletions.
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
62 changes: 62 additions & 0 deletions
62
fixtures/dom/src/components/fixtures/text-inputs/InputTestCase.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,62 @@ | ||
const React = window.React; | ||
|
||
import Fixture from '../../Fixture'; | ||
|
||
class InputTestCase extends React.Component { | ||
static defaultProps = { | ||
type: 'text', | ||
defaultValue: '', | ||
parseAs: 'text' | ||
} | ||
|
||
constructor () { | ||
super(...arguments); | ||
|
||
this.state = { | ||
value: this.props.defaultValue | ||
}; | ||
} | ||
|
||
onChange = (event) => { | ||
const raw = event.target.value; | ||
|
||
switch (this.props.type) { | ||
case 'number': | ||
const parsed = parseFloat(event.target.value, 10); | ||
|
||
this.setState({ value: isNaN(parsed) ? '' : parsed }); | ||
|
||
break; | ||
default: | ||
this.setState({ value: raw }); | ||
} | ||
} | ||
|
||
render() { | ||
const { children, type, defaultValue } = this.props; | ||
const { value } = this.state; | ||
|
||
return ( | ||
<Fixture> | ||
<div>{children}</div> | ||
|
||
<div className="control-box"> | ||
<fieldset> | ||
<legend>Controlled {type}</legend> | ||
<input type={type} value={value} onChange={this.onChange} /> | ||
<p className="hint"> | ||
Value: {JSON.stringify(this.state.value)} | ||
</p> | ||
</fieldset> | ||
|
||
<fieldset> | ||
<legend>Uncontrolled {type}</legend> | ||
<input type={type} defaultValue={defaultValue} /> | ||
</fieldset> | ||
</div> | ||
</Fixture> | ||
); | ||
} | ||
} | ||
|
||
export default InputTestCase; |
130 changes: 80 additions & 50 deletions
130
fixtures/dom/src/components/fixtures/text-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
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