[material-ui] Remove remaining IE11 code #42283

DiegoAndai · 2024-05-17T20:20:20Z

Material UI portion of #14420

Remove the remaining IE11-related code from the Material UI package.

mui-bot · 2024-05-17T20:23:38Z

Netlify deploy preview

https://deploy-preview-42283--material-ui.netlify.app/

@material-ui/core: parsed: -0.22% 😍, gzip: -0.29% 😍
@material-ui/lab: parsed: -0.34% 😍, gzip: -0.39% 😍
TabList: parsed: -1.02% 😍, gzip: -0.97% 😍

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 1efe736

DiegoAndai

Explanation on some of the changes (some missing)

DiegoAndai · 2024-05-22T16:04:06Z

packages/mui-material/src/ButtonBase/ButtonBase.js

-      event.key === ' '
-    ) {
-      keydownRef.current = true;
+    if (focusRipple && !event.repeat && focusVisible && rippleRef.current && event.key === ' ') {


Refactored with repeat: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/repeat.

Screen.Recording.2024-05-22.at.12.02.45.mov

DiegoAndai · 2024-05-22T18:21:05Z

packages/mui-material/src/ButtonBase/ButtonBase.test.js

-      // 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 });


Adjust according to above's (ButtonBase) refactor

DiegoAndai · 2024-05-22T18:28:06Z

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.


Introduced in #8877 to fix #8832.

Tested that it's working in Chrome, Firefox and Safari. Video from Chrome:

Screen.Recording.2024-05-22.at.14.25.12.mov

DiegoAndai · 2024-05-22T18:33:50Z

packages/mui-material/src/Dialog/Dialog.js

@@ -140,7 +139,6 @@ const DialogPaper = styled(Paper, {
      style: {
        display: 'inline-block',
        verticalAlign: 'middle',
-        textAlign: 'left', // 'initial' doesn't work on IE11


Introduced in: https://github.com/mui/material-ui/pull/15896/files#diff-ceb6f0d9cdbe18a334a4162f10048041b9b83290105a22ffd611608d94b81960R71

ested that it's working in Chrome, Firefox, and Safari. Video from Chrome:

Screen.Recording.2024-05-22.at.14.33.05.mov

DiegoAndai · 2024-05-22T18:37:15Z

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


There are a bunch of these comments, which I think got copied and pasted from the original issue: cssinjs/jss#242 (comment)

We have other content: '""' occurrences in the codebase without the comment. I think it's not bad to have content: '""', so I just removed the comment.

DiegoAndai · 2024-05-22T18:38:16Z

packages/mui-material/src/Tabs/Tabs.js

-    // IE11 support, replace with Number.isNaN
-    // eslint-disable-next-line no-restricted-globals
-    if (isNaN(indicatorStyle[startIndicator]) || isNaN(indicatorStyle[size])) {
+    if (Number.isNaN(+indicatorStyle[startIndicator]) || Number.isNaN(+indicatorStyle[size])) {


Coercion to number is required as: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isNaN#difference_between_number.isnan_and_global_isnan

Actually we don't need to check for NaN global type since it will be never be NaN as per the logic. See discussion in #41709 especially #41709 (comment) and #41709 (comment). We can use a typeof number check safely.

Thanks for bringing this up, updated!

DiegoAndai · 2024-05-22T18:39:07Z

packages/mui-material/src/InputBase/InputBase.test.js

@@ -110,27 +110,6 @@ describe('<InputBase />', () => {
      expect(handleFocus.callCount).to.equal(1);
    });

-    // IE11 bug


Removed IE11 related test

DiegoAndai · 2024-05-22T18:42:06Z

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.


Introduced in #12743

Tested that it's working in Chrome, Firefox and Safari. Screenshot from Chrome:

DiegoAndai · 2024-05-23T20:17:54Z

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.


Introduced in #12975

Tested it in Chrome, Firefox, and Safari. Screenshot in Chrome:

DiegoAndai · 2024-05-23T20:34:43Z

packages/mui-material/src/InputBase/InputBase.js

    animationName: 'mui-auto-fill-cancel',
    animationDuration: '10ms',
    '&::-webkit-input-placeholder': placeholder,
    '&::-moz-placeholder': placeholder, // Firefox 19+
-    '&:-ms-input-placeholder': placeholder, // IE11


This and the other '&:-ms-input-placeholder' were added in the original InputBase: https://github.com/mui/material-ui/pull/12076/files#diff-a5f495d99c59823944e8c99682e25d509e79d427ab0442c71589da33e6f350f6R81

Tested it in Chrome, Firefox, and Safari. Screenshot in Chrome:

Screen.Recording.2024-05-23.at.16.33.57.mov

DiegoAndai · 2024-05-23T20:40:26Z

packages/mui-material/src/InputBase/InputBase.js

@@ -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


Introduced in https://github.com/mui/material-ui/pull/12076/files#diff-a5f495d99c59823944e8c99682e25d509e79d427ab0442c71589da33e6f350f6R225

Tested it in Chrome, Firefox, and Safari. Screenshot in Chrome:

Screen.Recording.2024-05-23.at.16.39.35.mov

DiegoAndai · 2024-05-23T20:43:12Z

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


Introduced in https://github.com/mui/material-ui/pull/12975/files#diff-a5f495d99c59823944e8c99682e25d509e79d427ab0442c71589da33e6f350f6R78

Tested it in Chrome, Firefox, and Safari. Screenshot in Chrome:

DiegoAndai · 2024-05-23T20:46:08Z

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


Couldn't trace it further than https://github.com/mui/material-ui/pull/24698/files#diff-eca42ced51d2f5fc85b4932a8d16e28b815c6f193514d1f4101949e879970b12R53

Looks good in Chrome, Firefox, and Safari. Screenshot in Chrome:

DiegoAndai · 2024-05-23T20:48:25Z

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


Introduced in #13375

Tested in Chrome, Firefox, and Safari. Screenshot in Chrome:

DiegoAndai · 2024-05-23T20:49:16Z

On hold: #42358

ZeeshanTamboli

Nice job adding explanations for each change. I raised one comment; the rest looks good. I also see it in the docs here and here.

Doesn't this close #14420?

DiegoAndai · 2024-05-27T20:31:02Z

Doesn't this close #14420?

Not yet, because there are still some occurrences in other packages and the docs, as you pointed out. I want to handle those separately. This PR only covers Material UI.

DiegoAndai · 2024-05-28T20:03:22Z

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';


These are no longer needed as negative has been standardized on all supported browsers: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft#browser_compatibility

Tested in Chrome, Safari, Firefox, and Edge. Recording from Edge:

Screen.Recording.2024-05-28.at.16.02.54.mov

DiegoAndai · 2024-05-28T20:03:55Z

packages/mui-material/src/utils/scrollLeft.js

This reexport was only used in Tabs, and is no longer needed.

I'll handle the utils package in a separate PR.

If this utility was only used in Material UI Tabs, why not remove it in this PR from the mui-utils package? Also, does this complete the third task in #40958?

I would like to handle the mui-utils in a separate PR to have smaller PRs, making it easier to revert any issues on a package-per-package basis.

There is more IE11-related code in the utils; I don't want this PR to grow larger.

DiegoAndai · 2024-05-28T20:32:32Z

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.


Introduced in #17972. Rolling back to original.

ZeeshanTamboli

What do you think about removing this warning? We no longer want to suggest using Material UI version 4.

DiegoAndai · 2024-05-31T13:30:24Z

What do you think about removing this warning? We no longer want to suggest using Material UI version 4.

@ZeeshanTamboli Good catch. I agree; we officially do not support IE, so there is no need for the warning. Implemented.

Remove remaining IE11 code

24f664a

DiegoAndai added the package: material-ui Specific to @mui/material label May 17, 2024

DiegoAndai self-assigned this May 17, 2024

DiegoAndai added 2 commits May 22, 2024 11:23

Coerce indicator styles to number in Tabs

6bc7170

pnpm install

f826bf6

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label May 22, 2024

Merge branch 'next' into ie-11-removal-round

3d6156a

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label May 22, 2024

DiegoAndai added 2 commits May 22, 2024 11:36

pnpm install

9f29cf2

pnpm install again

32dda79

DiegoAndai commented May 22, 2024

View reviewed changes

DiegoAndai commented May 23, 2024

View reviewed changes

DiegoAndai added on hold There is a blocker, we need to wait breaking change labels May 23, 2024

DiegoAndai marked this pull request as ready for review May 24, 2024 21:55

DiegoAndai requested a review from ZeeshanTamboli May 24, 2024 21:55

ZeeshanTamboli reviewed May 25, 2024

View reviewed changes

Refactor isNan removal

e406fc1

DiegoAndai requested a review from ZeeshanTamboli May 27, 2024 20:35

DiegoAndai removed the on hold There is a blocker, we need to wait label May 28, 2024

Remove scroll normalization

39900c9

DiegoAndai commented May 28, 2024

View reviewed changes

Remove IE11 handling from server modal demos

65afab0

DiegoAndai commented May 28, 2024

View reviewed changes

ZeeshanTamboli reviewed May 31, 2024

View reviewed changes

Remove IE-related warning

1efe736

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[material-ui] Remove remaining IE11 code #42283

[material-ui] Remove remaining IE11 code #42283

DiegoAndai commented May 17, 2024 •

edited

mui-bot commented May 17, 2024 •

edited

DiegoAndai left a comment

DiegoAndai May 22, 2024

DiegoAndai May 22, 2024

DiegoAndai May 22, 2024

DiegoAndai May 22, 2024

DiegoAndai May 22, 2024

DiegoAndai May 22, 2024

ZeeshanTamboli May 25, 2024 •

edited

DiegoAndai May 27, 2024

DiegoAndai May 22, 2024

DiegoAndai May 22, 2024

DiegoAndai May 23, 2024

DiegoAndai May 23, 2024

DiegoAndai May 23, 2024

DiegoAndai May 23, 2024

DiegoAndai May 23, 2024

DiegoAndai May 23, 2024

DiegoAndai commented May 23, 2024

ZeeshanTamboli left a comment

DiegoAndai commented May 27, 2024 •

edited

DiegoAndai May 28, 2024

DiegoAndai May 28, 2024

ZeeshanTamboli May 29, 2024 •

edited

DiegoAndai May 30, 2024 •

edited

DiegoAndai May 28, 2024

ZeeshanTamboli left a comment

DiegoAndai commented May 31, 2024

[material-ui] Remove remaining IE11 code #42283

Are you sure you want to change the base?

[material-ui] Remove remaining IE11 code #42283

Conversation

DiegoAndai commented May 17, 2024 • edited

mui-bot commented May 17, 2024 • edited

Netlify deploy preview

Bundle size report

DiegoAndai left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZeeshanTamboli May 25, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DiegoAndai commented May 23, 2024

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

DiegoAndai commented May 27, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZeeshanTamboli May 29, 2024 • edited

Choose a reason for hiding this comment

DiegoAndai May 30, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

DiegoAndai commented May 31, 2024

DiegoAndai commented May 17, 2024 •

edited

mui-bot commented May 17, 2024 •

edited

ZeeshanTamboli May 25, 2024 •

edited

DiegoAndai commented May 27, 2024 •

edited

ZeeshanTamboli May 29, 2024 •

edited

DiegoAndai May 30, 2024 •

edited