Fix behavior of ReactDOMSelect
Closes #250. Test Plan: With multiple and not, verified: With defaultValue, the correct option is picked initially, user changes change the selection, and changes to defaultValue have no effect. With value, the correct option is picked initially, user changes do nothing, and changes to value change the selection. Also ran the tests.
Ben Alpert committed
Aug 4, 2013 at 18:07 UTC
25e2cd0db6673f0ae80534b983b57a8cde1a0be4
2 files changed
+159
-4
src/dom/components/ReactDOMSelect.js
+2
-4
@@ -58,11 +58,9 @@ function selectValueType(props, propName, componentName) {
58
*/
59
function updateOptions() {
60
/*jshint validthis:true */
61
- if (this.props.value == null) {
62
- return;
63
- }
61
+ var value = this.props.value != null ? this.props.value : this.state.value;
62
var options = this.getDOMNode().options;
65
- var selectedValue = '' + this.props.value;
63
+ var selectedValue = '' + value;
64
65
for (var i = 0, l = options.length; i < l; i++) {
66
var selected = this.props.multiple ?
src/dom/components/__tests__/ReactDOMSelect-test.js
new
+157
@@ -0,0 +1,157 @@
1
+/**
2
+ * Copyright 2013 Facebook, Inc.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ *
16
+ * @jsx React.DOM
17
+ * @emails react-core
18
+ */
19
+
20
+"use strict";
21
+
22
+/*jshint evil:true */
23
+
24
+describe('ReactDOMSelect', function() {
25
+ var React;
26
+ var ReactTestUtils;
27
+
28
+ var renderSelect;
29
+
30
+ beforeEach(function() {
31
+ React = require('React');
32
+ ReactTestUtils = require('ReactTestUtils');
33
+
34
+ renderSelect = function(component) {
35
+ var stub = ReactTestUtils.renderIntoDocument(component);
36
+ var node = stub.getDOMNode();
37
+ return node;
38
+ };
39
+ });
40
+
41
+ it('should allow setting `defaultValue`', function() {
42
+ var stub =
43
+ <select defaultValue="giraffe">
44
+ <option value="monkey">A monkey!</option>
45
+ <option value="giraffe">A giraffe!</option>
46
+ <option value="gorilla">A gorilla!</option>
47
+ </select>;
48
+ var node = renderSelect(stub);
49
+
50
+ expect(node.value).toBe('giraffe');
51
+
52
+ // Changing `defaultValue` should do nothing.
53
+ stub.setProps({defaultValue: 'gorilla'});
54
+ expect(node.value).toEqual('giraffe');
55
+ });
56
+
57
+ it('should allow setting `defaultValue` with multiple', function() {
58
+ var stub =
59
+ <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
60
+ <option value="monkey">A monkey!</option>
61
+ <option value="giraffe">A giraffe!</option>
62
+ <option value="gorilla">A gorilla!</option>
63
+ </select>;
64
+ var node = renderSelect(stub);
65
+
66
+ expect(node.options[0].selected).toBe(false); // monkey
67
+ expect(node.options[1].selected).toBe(true); // giraffe
68
+ expect(node.options[2].selected).toBe(true); // gorilla
69
+
70
+ // Changing `defaultValue` should do nothing.
71
+ stub.setProps({defaultValue: ['monkey']});
72
+
73
+ expect(node.options[0].selected).toBe(false); // monkey
74
+ expect(node.options[1].selected).toBe(true); // giraffe
75
+ expect(node.options[2].selected).toBe(true); // gorilla
76
+ });
77
+
78
+ it('should allow setting `value`', function() {
79
+ var stub =
80
+ <select value="giraffe">
81
+ <option value="monkey">A monkey!</option>
82
+ <option value="giraffe">A giraffe!</option>
83
+ <option value="gorilla">A gorilla!</option>
84
+ </select>;
85
+ var node = renderSelect(stub);
86
+
87
+ expect(node.value).toBe('giraffe');
88
+
89
+ // Changing the `value` prop should change the selected option.
90
+ stub.setProps({value: 'gorilla'});
91
+ expect(node.value).toEqual('gorilla');
92
+ });
93
+
94
+ it('should allow setting `value` with multiple', function() {
95
+ var stub =
96
+ <select multiple={true} value={['giraffe', 'gorilla']}>
97
+ <option value="monkey">A monkey!</option>
98
+ <option value="giraffe">A giraffe!</option>
99
+ <option value="gorilla">A gorilla!</option>
100
+ </select>;
101
+ var node = renderSelect(stub);
102
+
103
+ expect(node.options[0].selected).toBe(false); // monkey
104
+ expect(node.options[1].selected).toBe(true); // giraffe
105
+ expect(node.options[2].selected).toBe(true); // gorilla
106
+
107
+ // Changing the `value` prop should change the selected options.
108
+ stub.setProps({value: ['monkey']});
109
+
110
+ expect(node.options[0].selected).toBe(true); // monkey
111
+ expect(node.options[1].selected).toBe(false); // giraffe
112
+ expect(node.options[2].selected).toBe(false); // gorilla
113
+ });
114
+
115
+ it('should allow switching to multiple', function() {
116
+ var stub =
117
+ <select defaultValue="giraffe">
118
+ <option value="monkey">A monkey!</option>
119
+ <option value="giraffe">A giraffe!</option>
120
+ <option value="gorilla">A gorilla!</option>
121
+ </select>;
122
+ var node = renderSelect(stub);
123
+
124
+ expect(node.options[0].selected).toBe(false); // monkey
125
+ expect(node.options[1].selected).toBe(true); // giraffe
126
+ expect(node.options[2].selected).toBe(false); // gorilla
127
+
128
+ // When making it multiple, giraffe should still be selected
129
+ stub.setProps({multiple: true, defaultValue: null});
130
+
131
+ expect(node.options[0].selected).toBe(false); // monkey
132
+ expect(node.options[1].selected).toBe(true); // giraffe
133
+ expect(node.options[2].selected).toBe(false); // gorilla
134
+ });
135
+
136
+ it('should allow switching from multiple', function() {
137
+ var stub =
138
+ <select multiple={true} defaultValue={['giraffe', 'gorilla']}>
139
+ <option value="monkey">A monkey!</option>
140
+ <option value="giraffe">A giraffe!</option>
141
+ <option value="gorilla">A gorilla!</option>
142
+ </select>;
143
+ var node = renderSelect(stub);
144
+
145
+ expect(node.options[0].selected).toBe(false); // monkey
146
+ expect(node.options[1].selected).toBe(true); // giraffe
147
+ expect(node.options[2].selected).toBe(true); // gorilla
148
+
149
+ // When removing multiple, giraffe should still be selected (but gorilla
150
+ // will no longer be)
151
+ stub.setProps({multiple: false, defaultValue: null});
152
+
153
+ expect(node.options[0].selected).toBe(false); // monkey
154
+ expect(node.options[1].selected).toBe(true); // giraffe
155
+ expect(node.options[2].selected).toBe(false); // gorilla
156
+ });
157
+});