From 8cd5ef2cc877a03573f690f4a481297052beef84 Mon Sep 17 00:00:00 2001
From: achmurali <22786016+achmurali@users.noreply.github.com>
Date: Tue, 4 Oct 2022 23:20:23 +0530
Subject: [PATCH] fix document scrolling on focus, key down..

---
 src/mantine-core/src/Select/Select.tsx | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/mantine-core/src/Select/Select.tsx b/src/mantine-core/src/Select/Select.tsx
index a9a326bf8e0..ca899f0ecb9 100644
--- a/src/mantine-core/src/Select/Select.tsx
+++ b/src/mantine-core/src/Select/Select.tsx
@@ -362,6 +362,9 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
 
   const selectedItemIndex = _value ? filteredData.findIndex((el) => el.value === _value) : 0;
 
+  const shouldShowDropdown =
+    !readOnly && (filteredData.length > 0 ? dropdownOpened : dropdownOpened && !!nothingFound);
+
   const handlePrevious = () => {
     setHovered((current) => {
       const nextIndex = getNextIndex(
@@ -371,7 +374,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
       );
 
       targetRef.current = itemsRefs.current[filteredData[nextIndex]?.value];
-      scrollIntoView({ alignment: isColumn ? 'start' : 'end' });
+      shouldShowDropdown && scrollIntoView({ alignment: isColumn ? 'start' : 'end' });
       return nextIndex;
     });
   };
@@ -385,7 +388,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
       );
 
       targetRef.current = itemsRefs.current[filteredData[nextIndex]?.value];
-      scrollIntoView({ alignment: isColumn ? 'end' : 'start' });
+      shouldShowDropdown && scrollIntoView({ alignment: isColumn ? 'end' : 'start' });
       return nextIndex;
     });
   };
@@ -396,9 +399,12 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
       scrollIntoView({ alignment: isColumn ? 'end' : 'start' });
     }, 0);
 
+  useDidUpdate(() => {
+    if (shouldShowDropdown) scrollSelectedItemIntoView();
+  }, [shouldShowDropdown]);
+
   const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     typeof onKeyDown === 'function' && onKeyDown(event);
-
     switch (event.key) {
       case 'ArrowUp': {
         event.preventDefault();
@@ -438,7 +444,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
 
           const firstItemIndex = filteredData.findIndex((item) => !item.disabled);
           setHovered(firstItemIndex);
-          scrollIntoView({ alignment: isColumn ? 'end' : 'start' });
+          shouldShowDropdown && scrollIntoView({ alignment: isColumn ? 'end' : 'start' });
         }
         break;
       }
@@ -453,7 +459,7 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
 
           const lastItemIndex = filteredData.map((item) => !!item.disabled).lastIndexOf(false);
           setHovered(lastItemIndex);
-          scrollIntoView({ alignment: isColumn ? 'end' : 'start' });
+          shouldShowDropdown && scrollIntoView({ alignment: isColumn ? 'end' : 'start' });
         }
         break;
       }
@@ -507,7 +513,6 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
     typeof onFocus === 'function' && onFocus(event);
     if (searchable) {
       setDropdownOpened(true);
-      scrollSelectedItemIntoView();
     }
   };
 
@@ -530,14 +535,10 @@ export const Select = forwardRef<HTMLInputElement, SelectProps>((props, ref) =>
 
       if (_value && !dropdownOpened) {
         setHovered(selectedItemIndex);
-        scrollSelectedItemIntoView();
       }
     }
   };
 
-  const shouldShowDropdown =
-    !readOnly && (filteredData.length > 0 ? dropdownOpened : dropdownOpened && !!nothingFound);
-
   return (
     <Input.Wrapper {...wrapperProps} __staticSelector="Select">
       <SelectPopover