Closed aisamu closed 4 years ago
It sounds like the same root issue as #19206
They seem to have found a viable solution, but I'm not sure exactly how they do it. It seems to be:
let count = this.getIndexByValue(activeElement.getAttribute('data-value')) - 1;
let height = parseInt(getComputedStyle(this.liCollections[0], null).getPropertyValue('height'), 10);
if (!isNaN(height) && this.getModuleName() !== 'autocomplete') {
this.removeFocus();
let fixedHead = this.fields.groupBy ? this.liCollections[0].offsetHeight : 0;
this.list.scrollTop = count * height + fixedHead;
addClass([activeElement], dropDownListClasses.focus);
}
This is probably not the best approach, but it does relatively well the job (quick and dirty)
diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
index a0dcae57a..c54d010ce 100644
--- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
+++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js
@@ -178,11 +178,14 @@ export default function useAutocomplete(props) {
const element = option;
const scrollBottom = listboxNode.clientHeight + listboxNode.scrollTop;
- const elementBottom = element.offsetTop + element.offsetHeight;
+ const elementBottom = element.offsetTop + element.offsetHeight * 2;
if (elementBottom > scrollBottom) {
listboxNode.scrollTop = elementBottom - listboxNode.clientHeight;
- } else if (element.offsetTop < listboxNode.scrollTop) {
- listboxNode.scrollTop = element.offsetTop;
+ } else if (
+ element.offsetTop - element.offsetHeight * (groupBy ? 2 : 1) <
+ listboxNode.scrollTop
+ ) {
+ listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 2 : 1);
}
}
}
@aisamu Unless somebody can come up with a better approach, I think that we can move forward with it. What do you think? Do you want to take on this task? :)
Can I take this?
@netochaves I'm currently tackling this one! Would you mind giving a hand on #19251 or confirming that the proposed fix for #19213 works?
Current Behavior 😯
Once we reach the top while scrolling up the selection's no longer visible (and appears to be behind the group label):
Expected Behavior 🤔
Selected/hovered item should be visible
Steps to Reproduce 🕹
The issue is present on the official
AutoComplete
's demo pageSteps:
0-9
toA
Your Environment 🌎
Whatever's being currently used for the demo page! We've double checked that it also happens on our environment: