From 0957e74ee0023a927667911ec6eedd2d00c56b99 Mon Sep 17 00:00:00 2001
From: Aylong <69762909+AyIong@users.noreply.github.com>
Date: Fri, 3 Jan 2025 03:43:37 +0200
Subject: [PATCH] Fix Dropown autoscroll (#51)

---
 lib/components/Dropdown.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/lib/components/Dropdown.tsx b/lib/components/Dropdown.tsx
index b8a5a34..8f0394e 100644
--- a/lib/components/Dropdown.tsx
+++ b/lib/components/Dropdown.tsx
@@ -100,7 +100,7 @@ export function Dropdown(props: Props) {
   const selectedIndex =
     options.findIndex((option) => getOptionValue(option) === selected) || 0;
 
-  function scrollTo(position: number) {
+  function scrollToElement(position: number) {
     let scrollPos = position;
     if (position < selectedIndex) {
       scrollPos = position < 2 ? 0 : position - 2;
@@ -109,8 +109,12 @@ export function Dropdown(props: Props) {
         position > options.length - 3 ? options.length - 1 : position - 2;
     }
 
-    const element = innerRef.current?.children[scrollPos];
-    element?.scrollIntoView({ block: 'nearest' });
+    const dropdownMenu = innerRef.current;
+    const element = dropdownMenu?.children[scrollPos] as HTMLElement;
+
+    if (dropdownMenu && element) {
+      dropdownMenu.scrollTop = element.offsetTop;
+    }
   }
 
   /** Update the selected value when clicking the left/right buttons */
@@ -132,7 +136,7 @@ export function Dropdown(props: Props) {
     }
 
     if (open && autoScroll) {
-      scrollTo(newIndex);
+      scrollToElement(newIndex);
     }
     onSelected?.(getOptionValue(options[newIndex]));
   }
@@ -144,7 +148,7 @@ export function Dropdown(props: Props) {
     }
 
     if (autoScroll && selectedIndex !== NONE) {
-      scrollTo(selectedIndex);
+      scrollToElement(selectedIndex);
     }
 
     innerRef.current?.focus();