Disable IE innerHTML workaround behind a flag (#26390)
We don't need this workaround for SVG anymore and we don't need to workaround MSApp's security model since Windows 10.
Sebastian Markbåge committed
Mar 14, 2023 at 23:27 UTC
cfc1274e3be5a93a4c93f8fb87f2109993afe1dd
12 files changed
+27
-3
packages/react-dom-bindings/src/client/ReactDOMComponent.js
+13
-3
@@ -74,6 +74,7 @@ import {
74
enableCustomElementPropertySupport,
75
enableClientRenderFallbackOnTextMismatch,
76
enableHostSingletons,
77
+ disableIEWorkarounds,
78
} from 'shared/ReactFeatureFlags';
79
import {
80
mediaEventTypes,
@@ -116,7 +117,8 @@ if (__DEV__) {
117
// normalized. Since it only affects IE, we're skipping style warnings
118
// in that browser completely in favor of doing all that work.
119
// See https://github.com/facebook/react/issues/11807
119
- canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode;
120
+ canDiffStyleForHydrationWarning =
121
+ disableIEWorkarounds || (canUseDOM && !document.documentMode);
122
}
123
124
function validatePropertiesInDevelopment(type: string, props: any) {
@@ -308,7 +310,11 @@ function setInitialDOMProperties(
310
} else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
311
const nextHtml = nextProp ? nextProp[HTML] : undefined;
312
if (nextHtml != null) {
311
- setInnerHTML(domElement, nextHtml);
313
+ if (disableIEWorkarounds) {
314
+ domElement.innerHTML = nextHtml;
315
+ } else {
316
+ setInnerHTML(domElement, nextHtml);
317
+ }
318
}
319
} else if (propKey === CHILDREN) {
320
if (typeof nextProp === 'string') {
@@ -366,7 +372,11 @@ function updateDOMProperties(
372
if (propKey === STYLE) {
373
setValueForStyles(domElement, propValue);
374
} else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
369
- setInnerHTML(domElement, propValue);
375
+ if (disableIEWorkarounds) {
376
+ domElement.innerHTML = propValue;
377
+ } else {
378
+ setInnerHTML(domElement, propValue);
379
+ }
380
} else if (propKey === CHILDREN) {
381
setTextContent(domElement, propValue);
382
} else {
packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js
+1
@@ -195,6 +195,7 @@ describe('ReactDOMServerHydration', () => {
195
);
196
});
197
198
+ // @gate !disableIEWorkarounds || !__DEV__
199
it('should not warn when the style property differs on whitespace or order in IE', () => {
200
document.documentMode = 11;
201
jest.resetModules();
packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js
+2
@@ -55,6 +55,7 @@ describe('dangerouslySetInnerHTML', () => {
55
);
56
});
57
58
+ // @gate !disableIEWorkarounds
59
it('sets innerHTML on it', () => {
60
const html = '<circle></circle>';
61
const container = document.createElementNS(
@@ -69,6 +70,7 @@ describe('dangerouslySetInnerHTML', () => {
70
expect(circle.tagName).toBe('circle');
71
});
72
73
+ // @gate !disableIEWorkarounds
74
it('clears previous children', () => {
75
const firstHtml = '<rect></rect>';
76
const secondHtml = '<circle></circle>';
packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js
+1
@@ -208,6 +208,7 @@ describe('when Trusted Types are available in global object', () => {
208
);
209
});
210
211
+ // @gate !disableIEWorkarounds
212
it('should log a warning', () => {
213
class Component extends React.Component {
214
render() {
packages/shared/ReactFeatureFlags.js
+3
@@ -169,6 +169,9 @@ export const enableTrustedTypesIntegration = false;
169
// DOM properties
170
export const disableInputAttributeSyncing = false;
171
172
+// Remove IE and MsApp specific workarounds for innerHTML
173
+export const disableIEWorkarounds = __EXPERIMENTAL__;
174
+
175
// Filter certain DOM attributes (e.g. src, href) if their values are empty
176
// strings. This prevents e.g. <img src=""> from making an unnecessary HTTP
177
// request for certain browsers.
packages/shared/forks/ReactFeatureFlags.native-fb.js
+1
@@ -36,6 +36,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = true;
36
export const disableJavaScriptURLs = false;
37
export const disableCommentsAsDOMContainers = true;
38
export const disableInputAttributeSyncing = false;
39
+export const disableIEWorkarounds = true;
40
export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__;
41
export const enableScopeAPI = false;
42
export const enableCreateEventHandleAPI = false;
packages/shared/forks/ReactFeatureFlags.native-oss.js
+1
@@ -26,6 +26,7 @@ export const enableFetchInstrumentation = false;
26
export const disableJavaScriptURLs = false;
27
export const disableCommentsAsDOMContainers = true;
28
export const disableInputAttributeSyncing = false;
29
+export const disableIEWorkarounds = true;
30
export const enableSchedulerDebugging = false;
31
export const enableScopeAPI = false;
32
export const enableCreateEventHandleAPI = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.js
+1
@@ -26,6 +26,7 @@ export const enableFetchInstrumentation = true;
26
export const disableJavaScriptURLs = false;
27
export const disableCommentsAsDOMContainers = true;
28
export const disableInputAttributeSyncing = false;
29
+export const disableIEWorkarounds = true;
30
export const enableSchedulerDebugging = false;
31
export const enableScopeAPI = false;
32
export const enableCreateEventHandleAPI = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.native.js
+1
@@ -26,6 +26,7 @@ export const enableFetchInstrumentation = false;
26
export const disableJavaScriptURLs = false;
27
export const disableCommentsAsDOMContainers = true;
28
export const disableInputAttributeSyncing = false;
29
+export const disableIEWorkarounds = true;
30
export const enableSchedulerDebugging = false;
31
export const enableScopeAPI = false;
32
export const enableCreateEventHandleAPI = false;
packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+1
@@ -27,6 +27,7 @@ export const enableSchedulerDebugging = false;
27
export const disableJavaScriptURLs = false;
28
export const disableCommentsAsDOMContainers = true;
29
export const disableInputAttributeSyncing = false;
30
+export const disableIEWorkarounds = true;
31
export const enableScopeAPI = true;
32
export const enableCreateEventHandleAPI = false;
33
export const enableSuspenseCallback = true;
packages/shared/forks/ReactFeatureFlags.www-dynamic.js
+1
@@ -14,6 +14,7 @@
14
// with the __VARIANT__ set to `true`, and once set to `false`.
15
16
export const disableInputAttributeSyncing = __VARIANT__;
17
+export const disableIEWorkarounds = __VARIANT__;
18
export const enableFilterEmptyStringAttributesDOM = __VARIANT__;
19
export const enableLegacyFBSupport = __VARIANT__;
20
export const skipUnmountedBoundaries = __VARIANT__;
packages/shared/forks/ReactFeatureFlags.www.js
+1
@@ -16,6 +16,7 @@ const dynamicFeatureFlags: DynamicFeatureFlags = require('ReactFeatureFlags');
16
17
export const {
18
disableInputAttributeSyncing,
19
+ disableIEWorkarounds,
20
enableTrustedTypesIntegration,
21
disableSchedulerTimeoutBasedOnReactExpirationTime,
22
replayFailedUnitOfWorkWithInvokeGuardedCallback,