[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.

Author: aisamu

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);
       }
     }
   }