Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Disable IE innerHTML workaround behind a flag
Browse files Browse the repository at this point in the history
We don't need this workaround for SVG anymore and we don't need to
workaround MSApp's security model since Windows 10.
sebmarkbage committed Mar 15, 2023

Verified

This commit was signed with the committer’s verified signature.
orsenthil Senthil Kumaran
1 parent d310d65 commit dd814f4
Showing 11 changed files with 26 additions and 3 deletions.
16 changes: 13 additions & 3 deletions packages/react-dom-bindings/src/client/ReactDOMComponent.js
Original file line number Diff line number Diff line change
@@ -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 {
Original file line number Diff line number Diff line change
@@ -55,6 +55,7 @@ describe('dangerouslySetInnerHTML', () => {
);
});

// @gate !disableIEWorkarounds
it('sets innerHTML on it', () => {
const html = '<circle></circle>';
const container = document.createElementNS(
@@ -69,6 +70,7 @@ describe('dangerouslySetInnerHTML', () => {
expect(circle.tagName).toBe('circle');
});

// @gate !disableIEWorkarounds
it('clears previous children', () => {
const firstHtml = '<rect></rect>';
const secondHtml = '<circle></circle>';
Original file line number Diff line number Diff line change
@@ -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() {
3 changes: 3 additions & 0 deletions packages/shared/ReactFeatureFlags.js
Original file line number Diff line number Diff line change
@@ -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. <img src=""> from making an unnecessary HTTP
// request for certain browsers.
1 change: 1 addition & 0 deletions packages/shared/forks/ReactFeatureFlags.native-fb.js
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions packages/shared/forks/ReactFeatureFlags.native-oss.js
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions packages/shared/forks/ReactFeatureFlags.test-renderer.js
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
@@ -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;
1 change: 1 addition & 0 deletions packages/shared/forks/ReactFeatureFlags.www-dynamic.js
Original file line number Diff line number Diff line change
@@ -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__;
1 change: 1 addition & 0 deletions packages/shared/forks/ReactFeatureFlags.www.js
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@ const dynamicFeatureFlags: DynamicFeatureFlags = require('ReactFeatureFlags');

export const {
disableInputAttributeSyncing,
disableIEWorkarounds,
enableTrustedTypesIntegration,
disableSchedulerTimeoutBasedOnReactExpirationTime,
replayFailedUnitOfWorkWithInvokeGuardedCallback,

0 comments on commit dd814f4

Please sign in to comment.