Estoy creando un menú desplegable con selección única y múltiple, y estoy atascado en una función que quiero implementar para la variante de selección múltiple, pero no sé cómo continuar.

Como referencia, aquí está la implementación completa de Dropdown. https://codesandbox.io/s/dropdown-ytm4yy

En src/dropdown/components/multi-value-container.jsx , es donde tengo el contenedor desplegable de selección múltiple. Aquí está su código completo.

 import { useState, useRef, useLayoutEffect } from "react"; export const MultiValueContainer = ({ selected }) => { const [isOverflowing, setIsOverflowing] = useState(false); const selectedCount = selected.length; const ref = useRef(); useLayoutEffect(() => { const parentRect = ref.current?.getBoundingClientRect(); const parentWidth = parentRect.width; const childNodes = [...ref.current.childNodes]; const childNodesWidth = childNodes.map( (child) => child.getBoundingClientRect().width ); const childNodesWidthSum = childNodesWidth.reduce((acc, sum) => acc + sum); childNodesWidthSum > parentWidth ? setIsOverflowing(true) : setIsOverflowing(false); }, [selected]); return ( <div ref={ref} className="react-dropdown__multi-value-container"> {!isOverflowing && selected.map((option) => ( <div key={option.value} className="react-dropdown__multi--selected"> {option.label} </div> ))} {isOverflowing && ( <div className="react-dropdown__multi--selected max-width"> {selectedCount} items selected </div> )} </div> ); };

Lo que estoy tratando de hacer es esto: si el ancho total de los niños seleccionados es mayor que el del contenedor (le di una ref ), entonces quiero mostrar x items selected .

Implementé algo que funciona (verifique useLayoutEffect , pero con fallas, porque, por ejemplo, si selecciono una cantidad de elementos y se desbordan, los x items selected se muestran como se esperaba, pero en la siguiente selección, ref.current.childNodes buscará y verificará que solo tengo un chip renderizado (los x elementos seleccionados), cuyo ancho no excede el ancho del contenedor, por lo que continuará agregando otro.

¿Cómo puedo arreglar esto?