diff --git a/docs/data/material/components/modal/ServerModal.js b/docs/data/material/components/modal/ServerModal.js index f36dd9777bd05c..7be41e1c5d89af 100644 --- a/docs/data/material/components/modal/ServerModal.js +++ b/docs/data/material/components/modal/ServerModal.js @@ -13,11 +13,6 @@ export default function ServerModal() { flexGrow: 1, minWidth: 300, transform: 'translateZ(0)', - // The position fixed scoping doesn't work in IE11. - // Disable this demo to preserve the others. - '@media all and (-ms-high-contrast: none)': { - display: 'none', - }, }} ref={rootRef} > diff --git a/docs/data/material/components/modal/ServerModal.tsx b/docs/data/material/components/modal/ServerModal.tsx index 883ec5f5abca8c..8a4b09ab2b76b7 100644 --- a/docs/data/material/components/modal/ServerModal.tsx +++ b/docs/data/material/components/modal/ServerModal.tsx @@ -13,11 +13,6 @@ export default function ServerModal() { flexGrow: 1, minWidth: 300, transform: 'translateZ(0)', - // The position fixed scoping doesn't work in IE11. - // Disable this demo to preserve the others. - '@media all and (-ms-high-contrast: none)': { - display: 'none', - }, }} ref={rootRef} > diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.js b/packages/mui-material/src/ButtonBase/ButtonBase.js index e023daddf594a6..e97439c2ae8fc5 100644 --- a/packages/mui-material/src/ButtonBase/ButtonBase.js +++ b/packages/mui-material/src/ButtonBase/ButtonBase.js @@ -219,20 +219,9 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) { return component && component !== 'button' && !(button.tagName === 'A' && button.href); }; - /** - * IE11 shim for https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat - */ - const keydownRef = React.useRef(false); const handleKeyDown = useEventCallback((event) => { // Check if key is already down to avoid repeats being counted as multiple activations - if ( - focusRipple && - !keydownRef.current && - focusVisible && - rippleRef.current && - event.key === ' ' - ) { - keydownRef.current = true; + if (focusRipple && !event.repeat && focusVisible && rippleRef.current && event.key === ' ') { rippleRef.current.stop(event, () => { rippleRef.current.start(event); }); @@ -270,7 +259,6 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) { focusVisible && !event.defaultPrevented ) { - keydownRef.current = false; rippleRef.current.stop(event, () => { rippleRef.current.pulsate(event); }); diff --git a/packages/mui-material/src/ButtonBase/ButtonBase.test.js b/packages/mui-material/src/ButtonBase/ButtonBase.test.js index 35ddbff211a3d5..ecc79a592cbff8 100644 --- a/packages/mui-material/src/ButtonBase/ButtonBase.test.js +++ b/packages/mui-material/src/ButtonBase/ButtonBase.test.js @@ -901,9 +901,7 @@ describe('', () => { expect(container.querySelectorAll('.ripple-visible')).to.have.lengthOf(1); - // technically the second keydown should be fire with repeat: true - // but that isn't implemented in IE11 so we shouldn't mock it here either - fireEvent.keyDown(button, { key: 'Enter' }); + fireEvent.keyDown(button, { key: 'Enter', repeat: true }); expect(container.querySelectorAll('.ripple-visible')).to.have.lengthOf(1); }); diff --git a/packages/mui-material/src/Dialog/Dialog.js b/packages/mui-material/src/Dialog/Dialog.js index f92ff6b029842a..f7d1e687b68049 100644 --- a/packages/mui-material/src/Dialog/Dialog.js +++ b/packages/mui-material/src/Dialog/Dialog.js @@ -117,7 +117,6 @@ const DialogPaper = styled(Paper, { })(({ theme }) => ({ margin: 32, position: 'relative', - overflowY: 'auto', // Fix IE11 issue, to remove at some point. '@media print': { overflowY: 'visible', boxShadow: 'none', @@ -140,7 +139,6 @@ const DialogPaper = styled(Paper, { style: { display: 'inline-block', verticalAlign: 'middle', - textAlign: 'left', // 'initial' doesn't work on IE11 }, }, { diff --git a/packages/mui-material/src/FilledInput/FilledInput.js b/packages/mui-material/src/FilledInput/FilledInput.js index 5d243249930f48..932900c5bee79f 100644 --- a/packages/mui-material/src/FilledInput/FilledInput.js +++ b/packages/mui-material/src/FilledInput/FilledInput.js @@ -79,7 +79,6 @@ const FilledInputRoot = styled(InputBaseRoot, { '&::after': { left: 0, bottom: 0, - // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 content: '""', position: 'absolute', right: 0, @@ -108,7 +107,6 @@ const FilledInputRoot = styled(InputBaseRoot, { }`, left: 0, bottom: 0, - // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 content: '"\\00a0"', position: 'absolute', right: 0, diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index c0892ab7a6db9f..6e4013edfcefcc 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -48,7 +48,6 @@ const IconButtonRoot = styled(ButtonBase, { fontSize: theme.typography.pxToRem(24), padding: 8, borderRadius: '50%', - overflow: 'visible', // Explicitly set the default value to solve a bug on IE11. color: (theme.vars || theme).palette.action.active, transition: theme.transitions.create('background-color', { duration: theme.transitions.duration.shortest, diff --git a/packages/mui-material/src/ImageList/ImageList.js b/packages/mui-material/src/ImageList/ImageList.js index 5eddd5b2d0e93c..ee641bf92adb8a 100644 --- a/packages/mui-material/src/ImageList/ImageList.js +++ b/packages/mui-material/src/ImageList/ImageList.js @@ -70,20 +70,6 @@ const ImageList = React.forwardRef(function ImageList(inProps, ref) { [rowHeight, gap, variant], ); - React.useEffect(() => { - if (process.env.NODE_ENV !== 'production') { - // Detect Internet Explorer 8+ - if (document !== undefined && 'objectFit' in document.documentElement.style === false) { - console.error( - [ - 'MUI: ImageList v5+ no longer natively supports Internet Explorer.', - 'Use v4 of this component instead, or polyfill CSS object-fit.', - ].join('\n'), - ); - } - } - }, []); - const style = variant === 'masonry' ? { columnCount: cols, columnGap: gap, ...styleProp } diff --git a/packages/mui-material/src/Input/Input.js b/packages/mui-material/src/Input/Input.js index 2b511501b95efe..ea1bd5845f72b8 100644 --- a/packages/mui-material/src/Input/Input.js +++ b/packages/mui-material/src/Input/Input.js @@ -68,7 +68,6 @@ const InputRoot = styled(InputBaseRoot, { '&::after': { left: 0, bottom: 0, - // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 content: '""', position: 'absolute', right: 0, @@ -93,7 +92,6 @@ const InputRoot = styled(InputBaseRoot, { borderBottom: `1px solid ${bottomLineColor}`, left: 0, bottom: 0, - // Doing the other way around crash on IE11 "''" https://github.com/cssinjs/jss/issues/242 content: '"\\00a0"', position: 'absolute', right: 0, diff --git a/packages/mui-material/src/InputAdornment/InputAdornment.js b/packages/mui-material/src/InputAdornment/InputAdornment.js index 4ce2c503162b96..fb2e14349bb96c 100644 --- a/packages/mui-material/src/InputAdornment/InputAdornment.js +++ b/packages/mui-material/src/InputAdornment/InputAdornment.js @@ -45,7 +45,6 @@ const InputAdornmentRoot = styled('div', { overridesResolver, })(({ theme }) => ({ display: 'flex', - height: '0.01em', // Fix IE11 flexbox alignment. To remove at some point. maxHeight: '2em', alignItems: 'center', whiteSpace: 'nowrap', diff --git a/packages/mui-material/src/InputBase/InputBase.js b/packages/mui-material/src/InputBase/InputBase.js index dac171b0401af3..b0b6d0e04dee48 100644 --- a/packages/mui-material/src/InputBase/InputBase.js +++ b/packages/mui-material/src/InputBase/InputBase.js @@ -184,12 +184,11 @@ export const InputBaseInput = styled('input', { display: 'block', // Make the flex item shrink with Firefox minWidth: 0, - width: '100%', // Fix IE11 width issue + flexGrow: 1, animationName: 'mui-auto-fill-cancel', animationDuration: '10ms', '&::-webkit-input-placeholder': placeholder, '&::-moz-placeholder': placeholder, // Firefox 19+ - '&:-ms-input-placeholder': placeholder, // IE11 '&::-ms-input-placeholder': placeholder, // Edge '&:focus': { outline: 0, @@ -206,11 +205,9 @@ export const InputBaseInput = styled('input', { [`label[data-shrink=false] + .${inputBaseClasses.formControl} &`]: { '&::-webkit-input-placeholder': placeholderHidden, '&::-moz-placeholder': placeholderHidden, // Firefox 19+ - '&:-ms-input-placeholder': placeholderHidden, // IE11 '&::-ms-input-placeholder': placeholderHidden, // Edge '&:focus::-webkit-input-placeholder': placeholderVisible, '&:focus::-moz-placeholder': placeholderVisible, // Firefox 19+ - '&:focus:-ms-input-placeholder': placeholderVisible, // IE11 '&:focus::-ms-input-placeholder': placeholderVisible, // Edge }, [`&.${inputBaseClasses.disabled}`]: { @@ -390,13 +387,6 @@ const InputBase = React.forwardRef(function InputBase(inProps, ref) { }, [value, checkDirty, isControlled]); const handleFocus = (event) => { - // Fix a bug with IE11 where the focus/blur events are triggered - // while the component is disabled. - if (fcs.disabled) { - event.stopPropagation(); - return; - } - if (onFocus) { onFocus(event); } diff --git a/packages/mui-material/src/InputBase/InputBase.test.js b/packages/mui-material/src/InputBase/InputBase.test.js index 8bce7862d203f1..ed0a9224f5f78c 100644 --- a/packages/mui-material/src/InputBase/InputBase.test.js +++ b/packages/mui-material/src/InputBase/InputBase.test.js @@ -110,27 +110,6 @@ describe('', () => { expect(handleFocus.callCount).to.equal(1); }); - // IE11 bug - it('should not respond the focus event when disabled', () => { - const handleFocus = spy(); - // non-native input simulating how IE11 treats disabled inputs - const { getByRole } = render( -
- -
, - ); - - act(() => { - getByRole('textbox').focus(); - }); - expect(handleFocus.called).to.equal(false); - }); - it('fires the click event when the is disabled', () => { const handleClick = spy(); const { getByRole } = render(); diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.js index db1eae0f282dcb..4de10704548665 100644 --- a/packages/mui-material/src/NativeSelect/NativeSelectInput.js +++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.js @@ -35,10 +35,6 @@ export const StyledSelectSelect = styled('select')(({ theme }) => ({ // Reset Chrome style borderRadius: 0, }, - // Remove IE11 arrow - '&::-ms-expand': { - display: 'none', - }, [`&.${nativeSelectClasses.disabled}`]: { cursor: 'default', }, diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js index 0141fc7e395f07..e70efaacc6c2f2 100644 --- a/packages/mui-material/src/StepLabel/StepLabel.js +++ b/packages/mui-material/src/StepLabel/StepLabel.js @@ -104,7 +104,6 @@ const StepLabelIconContainer = styled('span', { slot: 'IconContainer', overridesResolver: (props, styles) => styles.iconContainer, })({ - flexShrink: 0, // Fix IE11 issue display: 'flex', paddingRight: 8, [`&.${stepLabelClasses.alternativeLabel}`]: { diff --git a/packages/mui-material/src/Tabs/Tabs.js b/packages/mui-material/src/Tabs/Tabs.js index 3bafb2efbb4ade..f07471d7bcf24f 100644 --- a/packages/mui-material/src/Tabs/Tabs.js +++ b/packages/mui-material/src/Tabs/Tabs.js @@ -10,7 +10,6 @@ import { useRtl } from '@mui/system/RtlProvider'; import { styled, createUseThemeProps } from '../zero-styled'; import useTheme from '../styles/useTheme'; import debounce from '../utils/debounce'; -import { getNormalizedScrollLeft, detectScrollType } from '../utils/scrollLeft'; import animate from '../internal/animate'; import ScrollbarSize from './ScrollbarSize'; import TabScrollButton from '../TabScrollButton'; @@ -380,7 +379,6 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) { clientWidth: tabsNode.clientWidth, scrollLeft: tabsNode.scrollLeft, scrollTop: tabsNode.scrollTop, - scrollLeftNormalized: getNormalizedScrollLeft(tabsNode, isRtl ? 'rtl' : 'ltr'), scrollWidth: tabsNode.scrollWidth, top: rect.top, bottom: rect.bottom, @@ -452,11 +450,9 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) { } else { startIndicator = isRtl ? 'right' : 'left'; if (tabMeta && tabsMeta) { - const correction = isRtl - ? tabsMeta.scrollLeftNormalized + tabsMeta.clientWidth - tabsMeta.scrollWidth - : tabsMeta.scrollLeft; startValue = - (isRtl ? -1 : 1) * (tabMeta[startIndicator] - tabsMeta[startIndicator] + correction); + (isRtl ? -1 : 1) * + (tabMeta[startIndicator] - tabsMeta[startIndicator] + tabsMeta.scrollLeft); } } @@ -466,9 +462,10 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) { [size]: tabMeta ? tabMeta[size] : 0, }; - // IE11 support, replace with Number.isNaN - // eslint-disable-next-line no-restricted-globals - if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) { + if ( + typeof indicatorStyle[startIndicator] !== 'number' || + typeof indicatorStyle[size] !== 'number' + ) { setIndicatorStyle(newIndicatorStyle); } else { const dStart = Math.abs(indicatorStyle[startIndicator] - newIndicatorStyle[startIndicator]); @@ -497,8 +494,6 @@ const Tabs = React.forwardRef(function Tabs(inProps, ref) { scrollValue += delta; } else { scrollValue += delta * (isRtl ? -1 : 1); - // Fix for Edge - scrollValue *= isRtl && detectScrollType() === 'reverse' ? -1 : 1; } scroll(scrollValue); diff --git a/packages/mui-material/src/utils/scrollLeft.js b/packages/mui-material/src/utils/scrollLeft.js deleted file mode 100644 index deb38e11766c69..00000000000000 --- a/packages/mui-material/src/utils/scrollLeft.js +++ /dev/null @@ -1,4 +0,0 @@ -export { - unstable_detectScrollType as detectScrollType, - unstable_getNormalizedScrollLeft as getNormalizedScrollLeft, -} from '@mui/utils';