HTML in children is not sanitized within collapsed component

[glennpow]

When ShowMoreText is collapsed, then any HTML tags that are present in the children (not as JSX, but as a raw string) are not sanitized properly. It appears that this happens in the Truncate inner component logic. This is a problem for us, since we do occasionally have HTML in our text, which we want to remain raw (not rendered).

Example

    const line = "<b>Test</b>\n";
    let content = "";
    for (var i = 0; i < 20; i++) {
      content += line;
    }

    return (
      <ShowMoreText
        expanded={false}
        keepNewLines={true}
        lines={5}
      >
        {content}
      </ShowMoreText>
    );

Collapsed

Expanded

[MelonBall]

We have the same problem, as in the HTML rendering doesn't have the same behaviour in collapsed vs. non-collapsed form.

[JohnGeorgiadis]

Hello :)
did anyone found a solution for this yet? I am facing the same issue.

[ronmara]

try this:

<ShowMoreText
    expanded={false}
    keepNewLines={true}
    lines={5}
>
    <div
        dangerouslySetInnerHTML={{
            __html: content,
        }}
    />
</ShowMoreText>

[MelonBall]

try this:

<ShowMoreText
    expanded={false}
    keepNewLines={true}
    lines={5}
>
    <div
        dangerouslySetInnerHTML={{
            __html: content,
        }}
    />
</ShowMoreText>

Then we have the reverse : the collapsed form will have the HTML tags and the non collapsed form will be formated.

[Razhelq]

Hi. The issue still persists. Any luck fixing that?