diff --git a/packages/react-dom-bindings/src/client/ReactDOMComponent.js b/packages/react-dom-bindings/src/client/ReactDOMComponent.js index 8cb2e95accb9ff..e8281801828fbc 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, @@ -132,7 +133,7 @@ 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)); warnForPropDifference = function ( propName: string, @@ -308,7 +309,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 +371,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/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js index 1bba854339b986..c0e3c2eac0ad9c 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 7482b84e7cf966..19ec4fc39750a7 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 29259deed6eccb..2c4b7993a6c37e 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 2e0079d5eccf89..1a1549a7d98e03 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 92f5a8ed4eda1b..e6dabd338bb2b9 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 c3ccf711f766ff..dbd8b2ff69f3ab 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 c754e184307013..53a293dab56f40 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 aa247e2c23b53e..4150dc9c8e9048 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,