microsoft-graph-toolkit icon indicating copy to clipboard operation
microsoft-graph-toolkit copied to clipboard

Published 20 hours ago • verified publisher icon microsoftgraph

[BUG] [MGT-CHAT] Receiving an emoji causes "a component is contentEditable and contains children managed by React"

Open plasne opened this issue 1 year ago • 2 comments

Describe the bug Receiving an emoji raises an error message in the Chat component...

react-dom.development.js:67  Warning: A component is `contentEditable` and contains `children` managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

To Reproduce Steps to reproduce the behavior:

  1. Open the console in the browser dev tools.
  2. Open a chat in MGT
  3. Send an emoji from Teams
  4. See error

Expected behavior I expect no errors when receiving content.

Screenshots image

...results in...

image

Environment (please complete the following information):

  • OS: macOS Monterey 12.7.3
  • Browser: Edge
  • Framework: React
  • Context: Web
  • Version: MGT 4
  • Provider: Msal2Provider

Additional context I am a MSFT FTE and can be reached at pelasne in Teams.

plasne avatar Feb 21 '24 15:02 plasne

@musale can you take a little time to investigate here? I'd like to understand what if this is due to the approach of using renderAsString.

gavinbarron avatar Feb 22 '24 17:02 gavinbarron

@musale I found that removing the content editable attribute from the html we emit for the emoji seems to fix the problem, this will be in a PR that I'm about to raise.

gavinbarron avatar Feb 23 '24 17:02 gavinbarron