Open 4m2c4bl3 opened 4 years ago
What browser? It appears ellipsed for me in Chrome?
Try changing the text in the input to a shorter text, you'll see the value does not change.
I'm using the latest version of Chrome in Ubuntu.
To work around this behavior, I'm giving the MiddleEllipsis component a key based off the input value, which forces it to re-render.
I see... yeah, that looks to be a problem. Possibly related to https://github.com/bluepeter/react-middle-ellipsis/issues/2
Putting the children as useCallback prop:
measuredParent = useCallback(node => {
if (node !== null) {
window.addEventListener("resize", () => prepEllipse(node));
prepEllipse(node);
return () => window.removeEventListener("resize", () => prepEllipse(node));
}
}, [props.children]);
And removing this if:
// (Re)-set text back to data-original-text if it exists.
if (txtToEllipse.hasAttribute('data-original')) {
txtToEllipse.textContent = txtToEllipse.getAttribute( 'data-original');
}
Worked for me.
There seems to be an issue where the value inside the ellipsis is not updating when the text is long enough to be truncated. Here's a demo: https://codesandbox.io/s/demo-middle-ellipsis-l8wq1