archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

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

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

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

* chore(changeset): add changeset
This commit is contained in:
աӄա 2025-02-06 04:38:47 +08:00 committed by GitHub
parent eb92904fad
commit f7c2be0a53
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.changeset/ninety-flowers-teach.md Normal file
View File

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

17
packages/components/listbox/src/virtualized-listbox.tsx
View File

@ -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",
}}

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

@ -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);
el.addEventListener("scroll", checkOverflow, true);
// 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]);