fix: DropdownContainer items width calculation (#22371)

This commit is contained in:
Michael S. Molina 2022-12-08 12:03:19 -05:00 committed by GitHub
parent f64423a740
commit 1edfd7e1e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 13 deletions

View File

@ -167,25 +167,25 @@ const DropdownContainer = forwardRef(
[items, overflowingIndex],
);
useEffect(() => {
if (itemsWidth.length !== items.length) {
const container = current?.children.item(0);
if (container) {
const { children } = container;
const childrenArray = Array.from(children);
setItemsWidth(
childrenArray.map(child => child.getBoundingClientRect().width),
);
}
}
}, [current?.children, items.length, itemsWidth.length]);
useLayoutEffect(() => {
const container = current?.children.item(0);
if (container) {
const { children } = container;
const childrenArray = Array.from(children);
// If items length change, add all items to the container
// and recalculate the widths
if (itemsWidth.length !== items.length) {
if (childrenArray.length === items.length) {
setItemsWidth(
childrenArray.map(child => child.getBoundingClientRect().width),
);
} else {
setOverflowingIndex(-1);
return;
}
}
// Calculates the index of the first overflowed element
// +1 is to give at least one pixel of difference and avoid flakiness
const index = childrenArray.findIndex(