Tengo un contenedor <div>
que se completará con algunas etiquetas a medida que el usuario seleccione opciones en un menú desplegable. Si las etiquetas llenan el espacio que designé para el contenedor, quiero mostrar una etiqueta "+N" con el número restante de opciones seleccionadas.
Salida esperada: la condición isOverflowing
se establece en true
.
Salida real: isOverflowing
nunca se establece en true
.
CÓDIGO
const [selectedOptions, setSelectedOptions] = useState<number[]>([]); const [overflowing, setOverflowing] = useState(false); const tagsRef = useRef<HTMLDivElement>(null); const isOverflowing = (element: any) => { return element.current?.scrollHeight > element.current?.clientHeight; // NEVER RETURNS TRUE }; useLayoutEffect(() => { if (isOverflowing(tagsRef)) { setOverflowing(true); } else { setOverflowing(false); } }, [tagsRef, selectedOptions]); ... return ( <TagsWrapper ref={tagsRef} className="tagsWrapper"> {selectedOptions.map((option, index) => ( ... ))} </TagsWrapper> )
CSS
.tagsWrapper { display: flex; flex-flow: row wrap; max-height: 32px; max-width: calc(100% - 50px - 16px - 4px); overflow: hidden; }
El registro de la consola tagsRef
siempre muestra que scrollHeight
y clientHeight
son iguales, cuando en realidad no lo son (puedo ver que el div es más alto cuando lo inspecciono en el navegador).
He probado muchas combinaciones de max-height
, height
... sin éxito. Si la propiedad de overflow
está configurada como visible
, obviamente funciona, pero no quiero mostrar las etiquetas restantes... ¿Hay alguna solución que no veo?
¡Gracias!
Me las arreglé para ver mi propio problema. Las propiedades max-height
y overflow
deben estar en el elemento principal del contenedor desbordado:
<TagsContainer> <TagsWrapper ref={tagsRef} className="tagsWrapper"> {selectedOptions.map((option, index) => ( ... ))} </TagsWrapper> </TagsContainer>
.tagsContainer { max-height: 32px; overflow: hidden; } .tagsWrapper { display: flex; flex-flow: row wrap; ... }