inner text not updating when new value passed in

[4m2c4bl3]

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

[bluepeter]

What browser? It appears ellipsed for me in Chrome?

[4m2c4bl3]

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.

[bluepeter]

I see... yeah, that looks to be a problem. Possibly related to #2

[axeldouglas]

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.