fix(Select): use ScrollIntoView function (#5047)

* refactor: 更新滚动问题 * chore: bump version 9.2.5-beta01
dotnetcore · Jan 6, 2025 · f5f401d · f5f401d
1 parent 88fba62
commit f5f401d
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 48 deletions.
diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj
@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.2.4</Version>
+    <Version>9.2.5-beta01</Version>
   </PropertyGroup>
 
   <ItemGroup>

diff --git a/src/BootstrapBlazor/Components/Select/Select.razor.js b/src/BootstrapBlazor/Components/Select/Select.razor.js
@@ -18,11 +18,10 @@ export function init(id, invoke, options) {
         if (search) {
             search.focus();
         }
-        const prev = popover.toggleMenu.querySelector('.dropdown-item.preActive')
-        if (prev) {
-            prev.classList.remove('preActive')
+        const active = popover.toggleMenu.querySelector('.dropdown-item.active');
+        if (active) {
+            scrollIntoView(el, active);
         }
-        scrollToActive(popover.toggleMenu, prev)
     }
 
     const keydown = e => {
@@ -61,15 +60,19 @@ export function init(id, invoke, options) {
                 else if (index > items.length - 1) {
                     index = 0;
                 }
-                items[index].classList.add('active');
-                const top = getTop(menu, index);
-                const hehavior = el.getAttribute('data-bb-scroll-behavior') ?? 'smooth';
-                menu.scrollTo({ top: top, left: 0, behavior: hehavior });
+                current = items[index];
+                current.classList.add('active');
+                scrollIntoView(el, current);
             }
         }
     }
 
-    EventHandler.on(el, 'shown.bs.dropdown', shown);
+    if (popover.isPopover) {
+        EventHandler.on(el, 'shown.bs.popover', shown);
+    }
+    else {
+        EventHandler.on(el, 'shown.bs.dropdown', shown);
+    }
 
     const input = el.querySelector(`#${id}_input`);
     EventHandler.on(input, 'keydown', keydown)
@@ -92,19 +95,6 @@ export function init(id, invoke, options) {
     Data.set(id, select);
 }
 
-const getTop = (menu, index) => {
-    const styles = getComputedStyle(menu)
-    const maxHeight = parseInt(styles.maxHeight) / 2
-    const itemHeight = getHeight(menu.querySelector('.dropdown-item'))
-    const height = itemHeight * index
-    const count = Math.floor(maxHeight / itemHeight);
-    let top = 0;
-    if (height > maxHeight) {
-        top = itemHeight * (index > count ? index - count : index)
-    }
-    return top;
-}
-
 export function show(id) {
     const select = Data.get(id)
     if (select) {
@@ -144,32 +134,12 @@ export function dispose(id) {
     }
 }
 
-function scrollToActive(el, activeItem) {
-    const virtualEl = el.querySelector('.dropdown-virtual');
-
-    activeItem ??= el.querySelector('.dropdown-item.active')
-
-    if (activeItem) {
-        const innerHeight = getInnerHeight(el)
-        const itemHeight = getHeight(activeItem);
-        const index = indexOf(el, activeItem)
-        const margin = itemHeight * index - (innerHeight - itemHeight) / 2;
-        const hehavior = el.getAttribute('data-bb-scroll-behavior') ?? 'smooth';
-
-        const search = el.querySelector('.search');
-        if (search.classList.contains('show')) {
-
-        }
-        if (margin >= 0) {
-            el.scrollTo({ top: margin, left: 0, behavior: hehavior });
-        }
-        else {
-            el.scrollTo({ top: margin, left: 0, behavior: hehavior });
-        }
-    }
-}
-
 function indexOf(el, element) {
     const items = el.querySelectorAll('.dropdown-item')
     return Array.prototype.indexOf.call(items, element)
 }
+
+const scrollIntoView = (el, item) => {
+    const behavior = el.getAttribute('data-bb-scroll-behavior') ?? 'smooth';
+    item.scrollIntoView({ behavior: behavior, block: "center", inline: "nearest" });
+}