-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: Virtualized Autocomplete scrolling issue on Internet Explorer 11 (IE) #22705
Comments
I've spend some time on this, but don't have a final fix to be honest. I believe the issue is that, clicking on the scrollbar acts like click away, and that is the reason why it is closed. But why does it happens only in IE11? 😕 When inspecting the elements I noticed that so I applied this change diff --git a/docs/src/pages/components/autocomplete/Virtualize.js b/docs/src/pages/components/autocomplete/Virtualize.jsindex 4eaa53df7f..42c2ad7e0e 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.js
+++ b/docs/src/pages/components/autocomplete/Virtualize.js
@@ -112,6 +112,7 @@ const useStyles = makeStyles({
'& ul': {
padding: 0,
margin: 0,
+ width: 'calc(100% + 20px) !important',
},
},
}); Which fixed the width But the issue is still there. All other examples work as expected in IE 11 (scrolling is not closing the listbox) |
As a workaround, I added this style to hide the scrollbar on IE 11 but still be able to scroll:
It doesn't fix the issue though. |
@oliviertassinari thanks for pointing that out, wasn't aware of it. I'll spend some time on it and will provide my findings tomorrow morning. |
So Olivier was right. Basically the difference between the virtualized and the other examples is that in the virtualized we need to check if the diff --git a/docs/src/pages/components/autocomplete/Virtualize.js b/docs/src/pages/components/autocomplete/Virtualize.jsindex 4eaa53df7f..d615712509 100644
--- a/docs/src/pages/components/autocomplete/Virtualize.js
+++ b/docs/src/pages/components/autocomplete/Virtualize.js
@@ -137,6 +137,7 @@ export default function Virtualize() {
disableListWrap
classes={classes}
ListboxComponent={ListboxComponent}
+ ie11CheckChild
renderGroup={renderGroup}
options={OPTIONS}
groupBy={(option) => option[0].toUpperCase()}
diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index b0edc3a225..6c5a418f2b 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -303,6 +303,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
selectOnFocus = !props.freeSolo,
size = 'medium',
value: valueProp,
+ ie11CheckChild,
...other
} = props;
/* eslint-enable @typescript-eslint/no-unused-vars */
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 75b3a2093a..ca46cb9b71 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -93,6 +93,7 @@ export default function useAutocomplete(props) {
includeInputInList = false,
inputValue: inputValueProp,
multiple = false,
+ ie11CheckChild,
onChange,
onClose,
onHighlightChange,
@@ -783,13 +784,23 @@ export default function useAutocomplete(props) {
const handleBlur = (event) => {
// Ignore the event when using the scrollbar with IE 11
if (
- listboxRef.current !== null &&
- document.activeElement === listboxRef.current.parentElement
+ (!ie11CheckChild &&
+ listboxRef.current !== null &&
+ document.activeElement === listboxRef.current.parentElement) ||
+ (listboxRef.current !== null && document.activeElement === listboxRef.current.firstChild)
) {
inputRef.current.focus();
return;
}
(END) Or if we have custom |
@mnajdova We have an alternative. We can lessen the check. I don't think we need to check that the document.activeElement is exactly a specific node as long as it's a descendant of the listbox. This would solve the issue: diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index 2544c436ad..5514200566 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
// Ignore the event when using the scrollbar with IE 11
if (
listboxRef.current !== null &&
- document.activeElement === listboxRef.current.parentElement
+ listboxRef.current.parentElement.contains(document.activeElement)
) {
inputRef.current.focus();
return; While we are at it, I have noticed that we could edge for: https://material-ui.com/components/menus/#limitations diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
index b0edc3a225..0b16375ae8 100644
--- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
+++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js
@@ -168,7 +168,7 @@ export const styles = (theme) => ({
/* Styles applied to the `Paper` component. */
paper: {
...theme.typography.body1,
- overflow: 'hidden',
+ overflow: 'auto',
margin: '4px 0',
},
/* Styles applied to the `listbox` component. */
@@ -193,6 +193,7 @@ export const styles = (theme) => ({
option: {
minHeight: 48,
display: 'flex',
+ overflow: 'hidden',
justifyContent: 'flex-start',
alignItems: 'center',
cursor: 'pointer', |
Is there any way I can help? @oliviertassinari @mnajdova |
@jakub-astrahit sure feel free to :) Make sure to follow https://github.com/mui-org/material-ui/blob/next/CONTRIBUTING.md I would say changes proposed from @oliviertassinari should be the starting point :) |
is it still available @oliviertassinari @mnajdova ? If yes, please assign it to me :) I'm new to the codebase, giving a try to open-source projects |
@bearfromtheabyss Feel free to work on it :) |
I've implemented the solution from @oliviertassinari Created a PR here I checked it and works fine now in Chrome and IE11 |
I am unable to click the scrollbar on the virtualized autocomplete.
Current Behavior 😯
Open https://material-ui.com/components/autocomplete/#virtualization in Internet Explorer 11 and open the dropdown. Then click the scrollbar and the dropdown will disappear.
Expected Behavior 🤔
The scrollbar should NOT disappear. I should be able to click and hold the scroll through the options.
Steps to Reproduce 🕹
Steps:
Context 🔦
It's broken in IE 11 only. It works fine in Chrome, for example.
Your Environment 🌎
Internet Explorer 11
The text was updated successfully, but these errors were encountered: