Custom chat message links are opened in a new tab

[olandahl]

I want to insert a link in some chat messages and the link should open in the current tab.

I've implemented the onRenderMessage function prop on the ChatComposite component where I change the message content to render a link. When the element is rendered the target attribute is always "_blank" which means it is always opened in a new tab. This happens even if I specify another target on the link. I use the defaultOnRender function to keep the default message rendering (except replacing the content with the link).

Example:

const onRenderMessage = (
  messageProps: MessageProps,
  defaultOnRender?: MessageRenderer
) => {
  const { message } = messageProps;
  if (message.messageType === "chat") {
    message.contentType = "html";
    message.content =
      "<a href=\"https://www.npmjs.com/package/@azure/communication-react\" target=\"_self\">test link</a>";
  }
  if (!defaultOnRender) {
    return <></>;
  }
  return defaultOnRender(messageProps);
};

Rendered element in the browser:

<a href="https://www.npmjs.com/package/@azure/communication-react" target="_blank" rel="noreferrer noopener">test link</a>

• @azure/communication-react 1.18.1

• @azure/communication-chat 1.5.2

• OS & Device: MacOS

• Browser: Chrome

• Browser Version: 127

In @azure/communication-react 1.16.1 this wasn't an issue. It was most probably introduced with this fix: https://github.com/Azure/communication-ui-library/pull/4669

[Leah-Xia-Microsoft]

Hi @olandahl, thanks for reaching out to us. Please allow us to look into this and we would get back to you shortly.

[Leah-Xia-Microsoft]

Hi @olandahl, we don't recommend opening links in the same tab because the composite will be replaced by the new content, causing the chat will be lost.

Opening links in a new tab is the intended behaviour. If you have a specific use case that requires opening in the same tab, please submit a feature request through this link. Thanks.