[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

I'm probably missing something, but the text in your recording isn't left alingned?

You're right 😅 I probably just saw a big block of text and that it scrolled as expected and missed the alignment. Fixed in #42778.

Thanks for the catch.

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

Oh wow, they did, it has never been either to build great components, fewer weird browser bugs to fix 😄.

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.

mbrookes · 2024-06-02T22:34:57Z

Don't forget all the uses of Array.indexOf('some string') [===|!==] -1 as a substitute for ~~Array.filter~~ Array.includes.

ZeeshanTamboli

Looks good to me! 👍

DiegoAndai · 2024-06-03T16:49:22Z

Don't forget all the uses of Array.indexOf('some string') [===|!==] -1 as a substitute for Array.filter.

@mbrookes, thanks for the callout. Do you remember an example in particular so we can create a separate issue for it?

mbrookes · 2024-06-03T19:57:57Z

Sorry, I meant Array.includes, which IE 11 doesn't support.

These should find the Material-UI specific ones but there are plenty more:

Components
Docs

oliviertassinari

Nice, thanks for simplifying the codebase 👍

oliviertassinari · 2024-08-20T22:41:44Z

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


Oh wow, they did, it has never been either to build great components, fewer weird browser bugs to fix 😄.

oliviertassinari · 2024-08-20T22:43:00Z

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


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

ZeeshanTamboli approved these changes Jun 3, 2024

View reviewed changes

DiegoAndai merged commit c0b30d0 into mui:next Jun 3, 2024
22 checks passed

DiegoAndai deleted the ie-11-removal-round branch June 3, 2024 16:48

DiegoAndai mentioned this pull request Jun 27, 2024

[material-ui][Dialog] Revert incorrect textAlign style removal #42778

Merged

mbrookes mentioned this pull request Jul 2, 2024

[material-ui][mui-system] Completely remove IE 11 support in v6 #14420

Closed

DiegoAndai mentioned this pull request Jul 2, 2024

[core] Use Array.includes instead of index checking #42826

Closed

joserodolfofreitas pushed a commit to joserodolfofreitas/material-ui that referenced this pull request Jul 29, 2024

[material-ui] Remove remaining IE11 code (mui#42283)

53f097a

This was referenced Aug 19, 2024

[material-ui][TextField] Text Fields are suddenly overflowing when using versions newer than 6.0.0-alpha.9 #43185

Closed

[material-ui] Revert visual regressions from #42283 #43364

Merged

DiegoAndai pushed a commit that referenced this pull request Aug 20, 2024

[material-ui] Revert visual regressions from #42283 (#43364)

58d14a6

oliviertassinari added the performance label Aug 20, 2024

oliviertassinari reviewed Aug 20, 2024

View reviewed changes

ZeeshanTamboli mentioned this pull request Sep 5, 2024

[material-ui][Dialog] Broken scrolling in fullScreen dialogs (v6) #43572

Closed

Msolmaz4 mentioned this pull request Sep 17, 2024

[Snyk] Upgrade @mui/styled-engine-sc from 6.0.0-alpha.7 to 6.0.0 Msolmaz4/dasTy#2

Open

shagg0r mentioned this pull request Sep 18, 2024

[Snyk] Upgrade @mui/material from 6.0.0-rc.0 to 6.0.0 shagg0r/test#5

Open

prathik2401 mentioned this pull request Sep 18, 2024

[Snyk] Upgrade @mui/styled-engine-sc from 6.0.0-alpha.7 to 6.0.0 prathik2401/my-portfolio#62

Merged

Msolmaz4 mentioned this pull request Sep 20, 2024

[Snyk] Upgrade @mui/styled-engine-sc from 6.0.0-alpha.7 to 6.0.1 Msolmaz4/dasTy#3

Open

snyk-io bot mentioned this pull request Sep 22, 2024

[Snyk] Upgrade: , , , , , , , , beautiful-react-hooks, date-fns, file-type, graphql-request, jazzicon, react-redux, react-toastify, typescript, web-vitals SherfeyInv/buddievers-frontend#4

Open

Msolmaz4 mentioned this pull request Sep 24, 2024

[Snyk] Upgrade @mui/styled-engine-sc from 6.0.0-alpha.7 to 6.0.2 Msolmaz4/dasTy#4

Open

[material-ui] Remove remaining IE11 code #42283

[material-ui] Remove remaining IE11 code #42283

Conversation

DiegoAndai commented May 17, 2024 • edited Loading

mui-bot commented May 17, 2024 • edited Loading

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZeeshanTamboli May 25, 2024 • edited Loading

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

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 Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ZeeshanTamboli May 29, 2024 • edited Loading

Choose a reason for hiding this comment

DiegoAndai May 30, 2024 • edited Loading

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

mbrookes commented Jun 2, 2024 • edited Loading

ZeeshanTamboli left a comment

Choose a reason for hiding this comment

DiegoAndai commented Jun 3, 2024 • edited by mbrookes Loading

mbrookes commented Jun 3, 2024

oliviertassinari left a 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 17, 2024 •

edited

Loading

mui-bot commented May 17, 2024 •

edited

Loading

ZeeshanTamboli May 25, 2024 •

edited

Loading

DiegoAndai commented May 27, 2024 •

edited

Loading

ZeeshanTamboli May 29, 2024 •

edited

Loading

DiegoAndai May 30, 2024 •

edited

Loading

mbrookes commented Jun 2, 2024 •

edited

Loading

DiegoAndai commented Jun 3, 2024 •

edited by mbrookes

Loading