diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index 037d787197c85..57689ca6145c7 100644 --- a/packages/react-dom-bindings/src/client/ReactDOMComponent.js +++ b/packages/react-dom-bindings/src/client/ReactDOMComponent.js @@ -74,6 +74,7 @@ import { enableCustomElementPropertySupport, enableClientRenderFallbackOnTextMismatch, enableHostSingletons, + disableIEWorkarounds, } from 'shared/ReactFeatureFlags'; import { mediaEventTypes, @@ -116,7 +117,8 @@ if (__DEV__) { // normalized. Since it only affects IE, we're skipping style warnings // in that browser completely in favor of doing all that work. // See https://github.com/facebook/react/issues/11807 - canDiffStyleForHydrationWarning = canUseDOM && !document.documentMode; + canDiffStyleForHydrationWarning = + disableIEWorkarounds || (canUseDOM && !document.documentMode); } function validatePropertiesInDevelopment(type: string, props: any) { @@ -308,7 +310,11 @@ function setInitialDOMProperties( } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { const nextHtml = nextProp ? nextProp[HTML] : undefined; if (nextHtml != null) { - setInnerHTML(domElement, nextHtml); + if (disableIEWorkarounds) { + domElement.innerHTML = nextHtml; + } else { + setInnerHTML(domElement, nextHtml); + } } } else if (propKey === CHILDREN) { if (typeof nextProp === 'string') { @@ -366,7 +372,11 @@ function updateDOMProperties( if (propKey === STYLE) { setValueForStyles(domElement, propValue); } else if (propKey === DANGEROUSLY_SET_INNER_HTML) { - setInnerHTML(domElement, propValue); + if (disableIEWorkarounds) { + domElement.innerHTML = propValue; + } else { + setInnerHTML(domElement, propValue); + } } else if (propKey === CHILDREN) { setTextContent(domElement, propValue); } else { diff --git a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js index d6a06842492e1..a9ae22f1f5676 100644 --- a/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js +++ b/packages/react-dom/src/__tests__/ReactServerRenderingHydration-test.js @@ -195,6 +195,7 @@ describe('ReactDOMServerHydration', () => { ); }); + // @gate !disableIEWorkarounds || !__DEV__ it('should not warn when the style property differs on whitespace or order in IE', () => { document.documentMode = 11; jest.resetModules(); diff --git a/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js b/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js index 25aece64a0734..71f9249a1e823 100644 --- a/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js +++ b/packages/react-dom/src/client/__tests__/dangerouslySetInnerHTML-test.js @@ -55,6 +55,7 @@ describe('dangerouslySetInnerHTML', () => { ); }); + // @gate !disableIEWorkarounds it('sets innerHTML on it', () => { const html = ''; const container = document.createElementNS( @@ -69,6 +70,7 @@ describe('dangerouslySetInnerHTML', () => { expect(circle.tagName).toBe('circle'); }); + // @gate !disableIEWorkarounds it('clears previous children', () => { const firstHtml = ''; const secondHtml = ''; diff --git a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js index 7483d15e7fcce..777ef41756ce4 100644 --- a/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js +++ b/packages/react-dom/src/client/__tests__/trustedTypes-test.internal.js @@ -208,6 +208,7 @@ describe('when Trusted Types are available in global object', () => { ); }); + // @gate !disableIEWorkarounds it('should log a warning', () => { class Component extends React.Component { render() { diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 1bba854339b98..c0e3c2eac0ad9 100644 --- a/packages/shared/ReactFeatureFlags.js +++ b/packages/shared/ReactFeatureFlags.js @@ -169,6 +169,9 @@ export const enableTrustedTypesIntegration = false; // DOM properties export const disableInputAttributeSyncing = false; +// Remove IE and MsApp specific workarounds for innerHTML +export const disableIEWorkarounds = __EXPERIMENTAL__; + // Filter certain DOM attributes (e.g. src, href) if their values are empty // strings. This prevents e.g. from making an unnecessary HTTP // request for certain browsers. diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js index 7482b84e7cf96..19ec4fc39750a 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-fb.js +++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js @@ -36,6 +36,7 @@ export const debugRenderPhaseSideEffectsForStrictMode = true; export const disableJavaScriptURLs = false; export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; +export const disableIEWorkarounds = true; export const replayFailedUnitOfWorkWithInvokeGuardedCallback = __DEV__; export const enableScopeAPI = false; export const enableCreateEventHandleAPI = false; diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js index 29259deed6ecc..2c4b7993a6c37 100644 --- a/packages/shared/forks/ReactFeatureFlags.native-oss.js +++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js @@ -26,6 +26,7 @@ export const enableFetchInstrumentation = false; export const disableJavaScriptURLs = false; export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; +export const disableIEWorkarounds = true; export const enableSchedulerDebugging = false; export const enableScopeAPI = false; export const enableCreateEventHandleAPI = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js index 2e0079d5eccf8..1a1549a7d98e0 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js @@ -26,6 +26,7 @@ export const enableFetchInstrumentation = true; export const disableJavaScriptURLs = false; export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; +export const disableIEWorkarounds = true; export const enableSchedulerDebugging = false; export const enableScopeAPI = false; export const enableCreateEventHandleAPI = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js index 92f5a8ed4eda1..e6dabd338bb2b 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.native.js @@ -26,6 +26,7 @@ export const enableFetchInstrumentation = false; export const disableJavaScriptURLs = false; export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; +export const disableIEWorkarounds = true; export const enableSchedulerDebugging = false; export const enableScopeAPI = false; export const enableCreateEventHandleAPI = false; diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js index c3ccf711f766f..dbd8b2ff69f3a 100644 --- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js +++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js @@ -27,6 +27,7 @@ export const enableSchedulerDebugging = false; export const disableJavaScriptURLs = false; export const disableCommentsAsDOMContainers = true; export const disableInputAttributeSyncing = false; +export const disableIEWorkarounds = true; export const enableScopeAPI = true; export const enableCreateEventHandleAPI = false; export const enableSuspenseCallback = true; diff --git a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js index c754e18430701..53a293dab56f4 100644 --- a/packages/shared/forks/ReactFeatureFlags.www-dynamic.js +++ b/packages/shared/forks/ReactFeatureFlags.www-dynamic.js @@ -14,6 +14,7 @@ // with the __VARIANT__ set to `true`, and once set to `false`. export const disableInputAttributeSyncing = __VARIANT__; +export const disableIEWorkarounds = __VARIANT__; export const enableFilterEmptyStringAttributesDOM = __VARIANT__; export const enableLegacyFBSupport = __VARIANT__; export const skipUnmountedBoundaries = __VARIANT__; diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js index aa247e2c23b53..4150dc9c8e904 100644 --- a/packages/shared/forks/ReactFeatureFlags.www.js +++ b/packages/shared/forks/ReactFeatureFlags.www.js @@ -16,6 +16,7 @@ const dynamicFeatureFlags: DynamicFeatureFlags = require('ReactFeatureFlags'); export const { disableInputAttributeSyncing, + disableIEWorkarounds, enableTrustedTypesIntegration, disableSchedulerTimeoutBasedOnReactExpirationTime, replayFailedUnitOfWorkWithInvokeGuardedCallback,