[Autocomplete] Add scrollbar support in IE11

[SergeyUstinovich]

IE11: Clicking on scrollbar of opened drop-down closes it.
It works fine in Google Chrome.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Clicking on scrollbar of opened drop-down closes it.

Expected Behavior 🤔

Clicking on the drop-down scrollbar should keep the drop-down opened and scroll it.

Steps to Reproduce 🕹

The issue exists even on the official website:
https://material-ui.com/components/autocomplete/#sizes

Steps:

1. Click on arrow down to open the drop-down with items
2. Click on arrow down of opened drop-down to scroll items
3. The drop-down is collapsed-> unexpected behavior

My Environment 🌎

Tech	Version
@material-ui/lab	4.0.0-alpha.45
React	16.9.2
Browser	IE11
Typescript	3.7.2

[oliviertassinari]

@SergeyUstinovich Thanks for the report. I have no idea on how to fix it.

But it seems the page could receive some care from an IE 11 standpoint:

1. We could remove the clear icon for this component:

diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index 612b04d28..1a269cf23 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -118,6 +118,10 @@ export const styles = theme => ({
     flexGrow: 1,
     textOverflow: 'ellipsis',
     opacity: 0,
+    // Hide IE 11 clear x button
+    '&::-ms-clear': {
+      display: 'none',
+    },
   },
   /* Styles applied to the input element if tag focused. */
   inputFocused: {

2. We could fix the layout of the documentation:

diff --git a/packages/material-ui/src/Container/Container.js b/packages/material-ui/src/Container/Container.js
index 95e4dbd93..48374d96a 100644
--- a/packages/material-ui/src/Container/Container.js
+++ b/packages/material-ui/src/Container/Container.js
@@ -11,6 +11,7 @@ export const styles = theme => ({
     marginLeft: 'auto',
     boxSizing: 'border-box',
     marginRight: 'auto',
+    display: 'block', // Fix IE 11 layout when used with main.
     paddingLeft: theme.spacing(2),
     paddingRight: theme.spacing(2),
     [theme.breakpoints.up('sm')]: {

What do you think of the following changes?

[SergeyUstinovich]

@oliviertassinari Thanks for looking at the issue.

If the issue is fixed by removing X icon then I would say go ahead and remove it.
We used the component for one of our client's application and we found the issue is showstopper for them as about 30% of their users are on Internet Explorer 11 :( .

And to be honest I do not care too much about the page layout fix as it's not a priority for me :)

[oliviertassinari]

No, they don't but this should:

diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 7dbdc34c9..f77b68bcf 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -661,6 +661,12 @@ export default function useAutocomplete(props) {
   };

   const handleBlur = event => {
+    // Ignore the event when using the scrollbar with IE 11
+    if (document.activeElement === listboxRef.current.parentElement) {
+      inputRef.current.focus();
+      return;
+    }
+
     setFocused(false);
     firstFocus.current = true;
     ignoreFocus.current = false;

Can you confirm? Feel free to open a pull request :)

(The parent element trick only works because of this constraint #18766)