MiddleTextTruncation

[arome]

I'm trying to use the MiddleTextTruncation component and want to have the option to click on the truncated text to display it in a popup if needed. For some reason, the content isn't clickable. Any idea what I'm doing wrong here?

Here's an example with the issue described:
https://stackblitz.com/edit/github-wd5ujsmd?file=src%2FApp.tsx

[mayank99]

You need to place the clickable element outside MiddleTextTruncation. The textRenderer prop is only meant for adjusting the text, not for adding interactive elements around it.

Here's a fixed sandbox showing how you can achieve the same thing: https://stackblitz.com/edit/github-wd5ujsmd-7knsrjw3?file=src%2FApp.tsx (Note that I'm using <Anchor as="button"> because Anchor without a href doesn't make sense otherwise).