From 0671abbd88af25d7ebfaafa73df7861ed7e49260 Mon Sep 17 00:00:00 2001 From: Samuel Tschiedel Date: Sun, 19 Jan 2020 11:13:13 -0300 Subject: [PATCH] [Autocomplete] Fix group labels hiding items during keybd navigation While scrolling up with the keyboard, position the top part of the option so that the both the group label and the row are fully visible. No changes were made for the scroll down behaviour, which already handled skipping the group label. Doesn't interfere with the current behaviour of autoselects without groups. The 1.3 ratio was selected through visual inspection, and is the value that minimizes misaligments and/or cropping of the topmost option. --- .../material-ui-lab/src/useAutocomplete/useAutocomplete.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js index d17c34abd83903..031f372f283564 100644 --- a/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js +++ b/packages/material-ui-lab/src/useAutocomplete/useAutocomplete.js @@ -182,8 +182,11 @@ export default function useAutocomplete(props) { const elementBottom = element.offsetTop + element.offsetHeight; 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 ? 1.3 : 0) < + listboxNode.scrollTop + ) { + listboxNode.scrollTop = element.offsetTop - element.offsetHeight * (groupBy ? 1.3 : 0); } } }