Get rid of server side support for <option />
We read the wrapper state during initial mount for server rendering support but Fiber doesn't use it and we don't need it. We also can't because we haven't yet completed the parent that has the selected. I will need to remember to always insert children before setting the selected value on the parent <select />. That way the DOM will deal with the `selected` property of option properly.
Sebastian Markbage committed
Nov 17, 2016 at 16:36 UTC
d2888a7dea75b8837f7dc479ada960ef7e98ccac
2 files changed
+2
-55
src/renderers/dom/fiber/wrappers/ReactDOMFiberOption.js
+2
-49
@@ -16,7 +16,6 @@ import type { Fiber } from 'ReactFiber';
16
17
var React = require('React');
18
var ReactDOMComponentTree = require('ReactDOMComponentTree');
19
-var ReactDOMSelect = require('ReactDOMSelect');
19
20
var warning = require('warning');
21
var didWarnInvalidOptionChildren = false;
@@ -48,7 +47,7 @@ function flattenChildren(children) {
47
* Implements an <option> host component that warns when `selected` is set.
48
*/
49
var ReactDOMOption = {
51
- mountWrapper: function(inst : Fiber, props : Object, hostParent : Fiber) {
50
+ mountWrapper: function(inst : Fiber, props : Object) {
51
// TODO (yungsters): Remove support for `selected` in <option>.
52
if (__DEV__) {
53
warning(
@@ -57,46 +56,6 @@ var ReactDOMOption = {
56
'setting `selected` on <option>.'
57
);
58
}
60
-
61
- // Look up whether this option is 'selected'
62
- var selectValue = null;
63
- if (hostParent != null) {
64
- var selectParent = hostParent;
65
-
66
- if (selectParent._tag === 'optgroup') {
67
- selectParent = selectParent._hostParent;
68
- }
69
-
70
- if (selectParent != null && selectParent._tag === 'select') {
71
- selectValue = ReactDOMSelect.getSelectValueContext(selectParent);
72
- }
73
- }
74
-
75
- // If the value is null (e.g., no specified value or after initial mount)
76
- // or missing (e.g., for <datalist>), we don't change props.selected
77
- var selected = null;
78
- if (selectValue != null) {
79
- var value;
80
- if (props.value != null) {
81
- value = props.value + '';
82
- } else {
83
- value = flattenChildren(props.children);
84
- }
85
- selected = false;
86
- if (Array.isArray(selectValue)) {
87
- // multiple
88
- for (var i = 0; i < selectValue.length; i++) {
89
- if ('' + selectValue[i] === value) {
90
- selected = true;
91
- break;
92
- }
93
- }
94
- } else {
95
- selected = ('' + selectValue === value);
96
- }
97
- }
98
-
99
- inst._wrapperState = {selected: selected};
59
},
60
61
postMountWrapper: function(inst : Fiber, props : Object) {
@@ -108,13 +67,7 @@ var ReactDOMOption = {
67
},
68
69
getHostProps: function(inst : Fiber, props : Object) {
111
- var hostProps = Object.assign({selected: undefined, children: undefined}, props);
112
-
113
- // Read state only from initial mount because <select> updates value
114
- // manually; we need the initial state only for server rendering
115
- if (inst._wrapperState.selected != null) {
116
- hostProps.selected = inst._wrapperState.selected;
117
- }
70
+ var hostProps = Object.assign({children: undefined}, props);
71
72
var content = flattenChildren(props.children);
73
src/renderers/dom/fiber/wrappers/ReactDOMFiberSelect.js
-6
@@ -148,12 +148,6 @@ var ReactDOMSelect = {
148
}
149
},
150
151
- getSelectValueContext: function(inst : Fiber) {
152
- // ReactDOMOption looks at this initial value so the initial generated
153
- // markup has correct `selected` attributes
154
- return inst._wrapperState.initialValue;
155
- },
156
-
151
postUpdateWrapper: function(inst : Fiber, props : Object) {
152
// After the initial mount, we control selected-ness manually so don't pass
153
// this value down