Add select, textarea, and range input fixtures
Also write up section on number inputs
Nathan Hunzaker committed
Dec 22, 2016 at 08:19 UTC
92fe3673ed1ed7e365dbc4a9ce821866061246e9
10 files changed
+290
-29
fixtures/range-inputs/README.md
new
+4
@@ -0,0 +1,4 @@
1
+# Range Inputs
2
+
3
+This fixture assists in the identification of browser issues with the range
4
+input type.
fixtures/range-inputs/index.html
new
+82
@@ -0,0 +1,82 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+
6
+ <title>Range Inputs</title>
7
+
8
+ <style>
9
+ * {
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ body {
14
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
15
+ }
16
+
17
+ .hint,
18
+ input[type="range"] {
19
+ display: inline-block;
20
+ font-size: 14px;
21
+ padding: 4px;
22
+ vertical-align: middle;
23
+ }
24
+
25
+ .hint {
26
+ padding-left: 8px;
27
+ }
28
+
29
+ form {
30
+ max-width: 900px;
31
+ margin: 0 auto;
32
+ text-align: center;
33
+ }
34
+
35
+ fieldset {
36
+ border: 1px solid #ccc;
37
+ display: inline-block;
38
+ padding: 20px;
39
+ width: 45%;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body>
44
+ <div id="container">Loading...</div>
45
+
46
+ <script src="../react-loader.js"></script>
47
+
48
+ <script type="text/babel">
49
+ class Test extends React.Component {
50
+
51
+ constructor (props, context) {
52
+ super(props, context)
53
+
54
+ this.state = { value: 0.5 }
55
+ }
56
+
57
+ onChange (event) {
58
+ this.setState({ value: event.target.value })
59
+ }
60
+
61
+ render() {
62
+ return (
63
+ <form>
64
+ <fieldset>
65
+ <legend>Controlled</legend>
66
+ <input type="range" value={this.state.value} onChange={this.onChange.bind(this)} />
67
+ <span className="hint">Value: {this.state.value}</span>
68
+ </fieldset>
69
+
70
+ <fieldset>
71
+ <legend>Uncontrolled</legend>
72
+ <input type="range" defaultValue={0.5} />
73
+ </fieldset>
74
+ </form>
75
+ )
76
+ }
77
+ }
78
+
79
+ ReactDOM.render(<Test />, document.getElementById('container'))
80
+ </script>
81
+ </body>
82
+</html>
fixtures/react-loader.js
+1
-1
@@ -9,7 +9,7 @@
9
10
var REACT_PATH = '../../build/react.js';
11
var DOM_PATH = '../../build/react-dom.js';
12
-var BABEL_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.js'
12
+var BABEL_PATH = 'https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.19.0/babel.js';
13
14
function parseQuery(qstr) {
15
var query = {};
fixtures/selects/README.md
new
+4
@@ -0,0 +1,4 @@
1
+# Selects
2
+
3
+This fixture assists in the identification of browser issues with the select
4
+element.
fixtures/selects/index.html
new
+79
@@ -0,0 +1,79 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+
6
+ <title>Selects</title>
7
+
8
+ <style>
9
+ * {
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ body {
14
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
15
+ }
16
+
17
+ form {
18
+ max-width: 900px;
19
+ margin: 0 auto;
20
+ text-align: center;
21
+ }
22
+
23
+ fieldset {
24
+ border: 1px solid #ccc;
25
+ display: inline-block;
26
+ padding: 20px;
27
+ width: 45%;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <div id="container">Loading...</div>
33
+
34
+ <script src="../react-loader.js"></script>
35
+
36
+ <script type="text/babel">
37
+ class Test extends React.Component {
38
+
39
+ constructor (props, context) {
40
+ super(props, context)
41
+
42
+ this.state = { value: '' }
43
+ }
44
+
45
+ onChange (event) {
46
+ this.setState({ value: event.target.value })
47
+ }
48
+
49
+ render() {
50
+ return (
51
+ <form>
52
+ <fieldset>
53
+ <legend>Controlled</legend>
54
+ <select value={this.state.value} onChange={this.onChange.bind(this)}>
55
+ <option value="">Select a color</option>
56
+ <option value="red">Red</option>
57
+ <option value="blue">Blue</option>
58
+ <option value="gree">Green</option>
59
+ </select>
60
+ </fieldset>
61
+
62
+ <fieldset>
63
+ <legend>Uncontrolled</legend>
64
+ <select defaultValue="">
65
+ <option value="">Select a color</option>
66
+ <option value="red">Red</option>
67
+ <option value="blue">Blue</option>
68
+ <option value="gree">Green</option>
69
+ </select>
70
+ </fieldset>
71
+ </form>
72
+ )
73
+ }
74
+ }
75
+
76
+ ReactDOM.render(<Test />, document.getElementById('container'))
77
+ </script>
78
+ </body>
79
+</html>
fixtures/test.html
+6
-3
@@ -58,8 +58,8 @@
58
iframe {
59
display: block;
60
height: 98%;
61
- height: calc(100vh - 52px);
62
- margin: 0 auto;
61
+ height: calc(100vh - 72px);
62
+ margin: 20px auto 0;
63
width: 100%;
64
}
65
@@ -84,7 +84,10 @@
84
<label for="example">
85
<span class="sr-only">Select an example</span>
86
<select id="example" name="example">
87
- <option value="./inputs/index.html">Inputs</option>
87
+ <option value="./text-inputs/index.html">Text Inputs</option>
88
+ <option value="./range-inputs/index.html">Range Inputs</option>
89
+ <option value="./selects/index.html">Selects</option>
90
+ <option value="./textareas/index.html">Textareas</option>
91
</select>
92
</label>
93
fixtures/text-inputs/README.md
renamed
+16
-3
@@ -1,7 +1,7 @@
1
-# Inputs
1
+# Text Inputs
2
3
-This fixture should help identify edge cases with inputs. There are a couple of
4
-important concepts to be aware of when working on inputs in React.
3
+There are a couple of important concepts to be aware of when working on text
4
+inputs in React.
5
6
## `defaultValue` vs `value`
7
@@ -47,3 +47,16 @@ input.defaultValue = 1
47
48
**React detaches all inputs**. This prevents `value` from accidentally updating if
49
`defaultValue` changes.
50
+
51
+## Form reset events
52
+
53
+React does not support `form.reset()` for controlled inputs. This is a feature,
54
+not a bug. `form.reset()` works by reverting an input's `value` _property_ to
55
+that of the current `defaultValue`. Since React assigns the value `attribute`
56
+every time a controlled input's value changes, controlled inputs will never
57
+"revert" back to their original display value.
58
+
59
+## Number inputs
60
+
61
+Chrome (55) and Safari (10) change the display value of number inputs any time
62
+the value property or attribute are changed.
fixtures/text-inputs/index.html
renamed
+18
-22
@@ -6,6 +6,10 @@
6
<title>Inputs</title>
7
8
<style>
9
+ * {
10
+ box-sizing: border-box;
11
+ }
12
+
13
body {
14
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
15
}
@@ -18,16 +22,11 @@
22
margin-bottom: 4px;
23
}
24
21
- h1 {
22
- text-align: center;
23
- }
24
-
25
.field {
26
padding: 8px;
27
}
28
29
form {
30
- display: flex;
30
max-width: 900px;
31
margin: 0 auto;
32
width: 100%;
@@ -36,8 +35,8 @@
35
fieldset {
36
border: 1px solid #aaa;
37
padding: 16px;
39
- flex-grow: 1;
40
- flex-basis: 50%;
38
+ float: left;
39
+ width: 49%;
40
}
41
</style>
42
</head>
@@ -47,7 +46,7 @@
46
<script src="../react-loader.js"></script>
47
48
<script type="text/babel">
50
- var Inputs = React.createClass({
49
+ var Test = React.createClass({
50
51
getInitialState() {
52
return {
@@ -101,24 +100,21 @@
100
]
101
102
return (
104
- <div>
105
- <h1>Input Kitchen Sink</h1>
106
- <form onSubmit={e=>e.preventDefault()}>
107
- <fieldset>
108
- <legend>Controlled</legend>
109
- {types.map(this.renderControlled)}
110
- </fieldset>
111
- <fieldset>
112
- <legend>Uncontrolled</legend>
113
- {types.map(this.renderUncontrolled)}
114
- </fieldset>
115
- </form>
116
- </div>
103
+ <form onSubmit={e=>e.preventDefault()}>
104
+ <fieldset>
105
+ <legend>Controlled</legend>
106
+ {types.map(this.renderControlled)}
107
+ </fieldset>
108
+ <fieldset>
109
+ <legend>Uncontrolled</legend>
110
+ {types.map(this.renderUncontrolled)}
111
+ </fieldset>
112
+ </form>
113
)
114
}
115
})
116
121
- ReactDOM.render(<Inputs />, document.getElementById('container'))
117
+ ReactDOM.render(<Test />, document.getElementById('container'))
118
</script>
119
</body>
120
</html>
fixtures/textareas/README.md
new
+4
@@ -0,0 +1,4 @@
1
+# Textareas
2
+
3
+This fixture assists in the identification of browser issues with the textarea
4
+element.
fixtures/textareas/index.html
new
+76
@@ -0,0 +1,76 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+
6
+ <title>Textarea</title>
7
+
8
+ <style>
9
+ * {
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ body {
14
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
15
+ }
16
+
17
+ textarea {
18
+ display: block;
19
+ min-height: 250px;
20
+ width: 100%;
21
+ }
22
+
23
+ form {
24
+ max-width: 900px;
25
+ margin: 0 auto;
26
+ text-align: center;
27
+ }
28
+
29
+ fieldset {
30
+ border: 1px solid #ccc;
31
+ display: inline-block;
32
+ padding: 20px;
33
+ vertical-align: top;
34
+ width: 45%;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <div id="container">Loading...</div>
40
+
41
+ <script src="../react-loader.js"></script>
42
+
43
+ <script type="text/babel">
44
+ class Test extends React.Component {
45
+
46
+ constructor (props, context) {
47
+ super(props, context)
48
+
49
+ this.state = { value: '' }
50
+ }
51
+
52
+ onChange (event) {
53
+ this.setState({ value: event.target.value })
54
+ }
55
+
56
+ render() {
57
+ return (
58
+ <form>
59
+ <fieldset>
60
+ <legend>Controlled</legend>
61
+ <textarea value={this.state.value} onChange={this.onChange.bind(this)} />
62
+ </fieldset>
63
+
64
+ <fieldset>
65
+ <legend>Uncontrolled</legend>
66
+ <textarea defaultValue="" />
67
+ </fieldset>
68
+ </form>
69
+ )
70
+ }
71
+ }
72
+
73
+ ReactDOM.render(<Test />, document.getElementById('container'))
74
+ </script>
75
+ </body>
76
+</html>