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

View File

@ -167,25 +167,25 @@ const DropdownContainer = forwardRef(
[items, overflowingIndex], [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(() => { useLayoutEffect(() => {
const container = current?.children.item(0); const container = current?.children.item(0);
if (container) { if (container) {
const { children } = container; const { children } = container;
const childrenArray = Array.from(children); 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 // Calculates the index of the first overflowed element
// +1 is to give at least one pixel of difference and avoid flakiness // +1 is to give at least one pixel of difference and avoid flakiness
const index = childrenArray.findIndex( const index = childrenArray.findIndex(