Fix DocsRating DOM error with browser translation#4631
Conversation
|
Hi @jungwoo3490! Thank you for your pull request and welcome to our community. Action RequiredIn order to merge any pull request (code, docs, etc.), we require contributors to sign our Contributor License Agreement, and we don't seem to have one on file for you. ProcessIn order for us to review and merge your suggested changes, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA. Once the CLA is signed, our tooling will perform checks and validations. Afterwards, the pull request will be tagged with If you have received this in error or have any questions, please contact us at cla@meta.com. Thanks! |
✅ Deploy Preview for react-native ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Meta Open Source project. Thanks! |
Simek
left a comment
Simek
left a comment
There was a problem hiding this comment.
Thanks for catching the translate issue! 👍 In this case it's fine to replace fragment with div, so merging in.
3 participants
The
DocsRatingcomponent crashes with a DOM manipulation error when users have browser translation enabled and click the thumbs up/down buttons.2025-06-05.2.04.43.mov
When the component initially renders, the React Fragment causes the text node "Is this page useful?" and SVG elements to be directly attached to the parent div without any wrapper container. The browser's translation feature then detects this text node and directly manipulates the DOM to replace it with translated content, which modifies the DOM structure outside of React's control.
When a user clicks the thumbs up or down button, it triggers
setHaveVoted(true), causing React to re-render and attempt to remove the existing Fragment content from the DOM. However, since the translation tool has already altered the DOM structure, the nodes that React expects to find are no longer in their original positions or have been replaced entirely, leading to a mismatch between React's virtual DOM and the actual DOM.This discrepancy causes React to fail when trying to remove child nodes that are no longer children of their expected parent, ultimately resulting in the "removeChild failed - not a child" error being thrown.
So I replaced
<>Fragment with<div>in DocsRating component. So now, even when translation tools modify the internal text, the div container itself remains intact.2025-06-05.2.52.04.mov