Do not render `name` attribute on INPUT if it is not supplied. Closes #7198. (#7199)
Andrey Okonetchnikov committed
Jul 6, 2016 at 19:11 UTC
0d892c03da1ac3bc8f6f8e2ce997a475b4f2db2b
2 files changed
+36
-5
src/renderers/dom/client/wrappers/ReactDOMInput.js
+6
-2
@@ -237,10 +237,14 @@ var ReactDOMInput = {
237
// Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416
238
// We need to temporarily unset name to avoid disrupting radio button groups.
239
var name = node.name;
240
- node.name = undefined;
240
+ if (name !== '') {
241
+ node.name = '';
242
+ }
243
node.defaultChecked = !node.defaultChecked;
244
node.defaultChecked = !node.defaultChecked;
243
- node.name = name;
245
+ if (name !== '') {
246
+ node.name = name;
247
+ }
248
},
249
};
250
src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+30
-3
@@ -111,6 +111,35 @@ describe('ReactDOMInput', function() {
111
expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
112
});
113
114
+ it('should render name attribute if it is supplied', function() {
115
+ var container = document.createElement('div');
116
+ var node = ReactDOM.render(<input type="text" name="name" />, container);
117
+ expect(node.name).toBe('name');
118
+ expect(container.firstChild.getAttribute('name')).toBe('name');
119
+ });
120
+
121
+ it('should render name attribute if it is supplied for SSR', function() {
122
+ var element = <input type="text" name="name" />;
123
+ var markup = ReactDOMServer.renderToString(element);
124
+ var div = document.createElement('div');
125
+ div.innerHTML = markup;
126
+ expect(div.firstChild.getAttribute('name')).toBe('name');
127
+ });
128
+
129
+ it('should not render name attribute if it is not supplied', function() {
130
+ var container = document.createElement('div');
131
+ ReactDOM.render(<input type="text" />, container);
132
+ expect(container.firstChild.getAttribute('name')).toBe(null);
133
+ });
134
+
135
+ it('should not render name attribute if it is not supplied for SSR', function() {
136
+ var element = <input type="text" />;
137
+ var markup = ReactDOMServer.renderToString(element);
138
+ var div = document.createElement('div');
139
+ div.innerHTML = markup;
140
+ expect(div.firstChild.getAttribute('name')).toBe(null);
141
+ });
142
+
143
it('should display "foobar" for `defaultValue` of `objToString`', function() {
144
var objToString = {
145
toString: function() {
@@ -681,7 +710,7 @@ describe('ReactDOMInput', function() {
710
value="value"
711
defaultChecked={true}
712
checked={false}
684
- onChange={() => null}
713
+ onChange={() => null}
714
/>, container);
715
expect(console.error.calls.count()).toBe(0);
716
});
@@ -727,10 +756,8 @@ describe('ReactDOMInput', function() {
756
'set type',
757
'set value',
758
'set value',
730
- 'set name',
759
'set checked',
760
'set checked',
733
- 'set name',
761
]);
762
});
763