fix(listbox): unexpected scrollShadow on virtualized listbox (#4784)

* fix(listbox): add scroll height & scroll top to listbox

* fix(use-data-scroll-overflow): handle scrollHeight & scrollTop in virtualization

* chore(changeset): add changeset

.changeset/ninety-flowers-teach.md

@@ -0,0 +1,6 @@
+---
+"@heroui/use-data-scroll-overflow": patch
+"@heroui/listbox": patch
+---
+
+fixed unexpected scrollShadow on virtualized listbox (#4553)

packages/components/listbox/src/virtualized-listbox.tsx

@@ -105,7 +105,10 @@ const VirtualizedListbox = (props: Props) => {
 
   const virtualItems = rowVirtualizer.getVirtualItems();
 
-  /* Here we need the base props for scroll shadow, contains the className (scrollbar-hide and scrollshadow config based on the user inputs on select props) */
+  const virtualScrollHeight = rowVirtualizer.getTotalSize();
+
+  // Here we need the base props for scroll shadow,
+  // contains the className (scrollbar-hide and scrollshadow config based on the user inputs on select props)
   const {getBaseProps: getBasePropsScrollShadow} = useScrollShadow({...scrollShadowProps});
 
   const renderRow = (virtualItem: VirtualItem) => {
@@ -162,6 +165,7 @@ const VirtualizedListbox = (props: Props) => {
     return listboxItem;
   };
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [scrollState, setScrollState] = useState({
     isTop: false,
     isBottom: true,
@@ -169,7 +173,11 @@ const VirtualizedListbox = (props: Props) => {
   });
 
   const content = (
-    <Component {...getListProps()}>
+    <Component
+      {...getListProps()}
+      data-virtual-scroll-height={virtualScrollHeight}
+      data-virtual-scroll-top={parentRef?.current?.scrollTop}
+    >
       {!state.collection.size && !hideEmptyContent && (
         <li>
           <div {...getEmptyContentProps()} />
@@ -178,9 +186,6 @@ const VirtualizedListbox = (props: Props) => {
       <div
         {...filterDOMProps(getBasePropsScrollShadow())}
         ref={parentRef}
-        data-bottom-scroll={scrollState.isTop}
-        data-top-bottom-scroll={scrollState.isMiddle}
-        data-top-scroll={scrollState.isBottom}
         style={{
           height: maxListboxHeight,
           overflow: "auto",
@@ -192,7 +197,7 @@ const VirtualizedListbox = (props: Props) => {
         {listHeight > 0 && itemHeight > 0 && (
           <div
             style={{
-              height: `${rowVirtualizer.getTotalSize()}px`,
+              height: `${virtualScrollHeight}px`,
               width: "100%",
               position: "relative",
             }}

packages/hooks/use-data-scroll-overflow/src/index.ts

@@ -112,12 +112,22 @@ export function useDataScrollOverflow(props: UseDataScrollOverflowProps = {}) {
         {type: "horizontal", prefix: "left", suffix: "right"},
       ];
 
+      const listbox = el.querySelector('ul[data-slot="list"]');
+
+      // in virtualized listbox, el.scrollHeight is the height of the visible listbox
+      const scrollHeight = +(
+        listbox?.getAttribute("data-virtual-scroll-height") ?? el.scrollHeight
+      );
+
+      // in virtualized listbox, el.scrollTop is always 0
+      const scrollTop = +(listbox?.getAttribute("data-virtual-scroll-top") ?? el.scrollTop);
+
       for (const {type, prefix, suffix} of directions) {
         if (overflowCheck === type || overflowCheck === "both") {
-          const hasBefore = type === "vertical" ? el.scrollTop > offset : el.scrollLeft > offset;
+          const hasBefore = type === "vertical" ? scrollTop > offset : el.scrollLeft > offset;
           const hasAfter =
             type === "vertical"
-              ? el.scrollTop + el.clientHeight + offset < el.scrollHeight
+              ? scrollTop + el.clientHeight + offset < scrollHeight
               : el.scrollLeft + el.clientWidth + offset < el.scrollWidth;
 
           setAttributes(type, hasBefore, hasAfter, prefix, suffix);
@@ -132,8 +142,7 @@ export function useDataScrollOverflow(props: UseDataScrollOverflowProps = {}) {
     };
 
     // auto
-    checkOverflow();
+    el.addEventListener("scroll", checkOverflow, true);
-    el.addEventListener("scroll", checkOverflow);
 
     // controlled
     if (visibility !== "auto") {
@@ -152,7 +161,7 @@ export function useDataScrollOverflow(props: UseDataScrollOverflowProps = {}) {
     }
 
     return () => {
-      el.removeEventListener("scroll", checkOverflow);
+      el.removeEventListener("scroll", checkOverflow, true);
       clearOverflow();
     };
   }, [...updateDeps, isEnabled, visibility, overflowCheck, onVisibilityChange, domRef]);