surveyjs-react doesn't work when using google translate

[joker-777]

If the user has Google translate enabled on its Chrome and goes to the next page of the form it shows this error in the console and the whole form disappears.

Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insertBefore (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:10290:18)
    at insertOrAppendPlacementNode (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21222:7)
    at commitPlacement (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:21183:5)
    at commitMutationEffects (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23361:11)
    at HTMLUnknownElement.callCallback (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3945:14)
    at Object.invokeGuardedCallbackDev (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3994:16)
    at invokeGuardedCallback (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4056:31)
    at commitRootImpl (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23121:9)
    at unstable_runWithPriority (https://9cvi6.csb.app/node_modules/scheduler/cjs/scheduler.development.js:468:12)
    at runWithPriority$1 (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
    at commitRoot (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22990:3)
    at performSyncWorkOnRoot (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22329:3)
    at eval (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11327:26)
    at unstable_runWithPriority (https://9cvi6.csb.app/node_modules/scheduler/cjs/scheduler.development.js:468:12)
    at runWithPriority$1 (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11276:10)
    at flushSyncCallbackQueueImpl (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11322:9)
    at flushSyncCallbackQueue (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11309:3)
    at discreteUpdates$1 (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22420:9)
    at discreteUpdates (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3756:12)
    at dispatchDiscreteEvent (https://9cvi6.csb.app/node_modules/react-dom/cjs/react-dom.development.js:5889:3)

You can test it by opening this example in the codesandbox, then run it in a dedicated tab, right click somewhere and select "translate to ...". Then fill out the question and go to the next page. It should create this error.

[tsv2013]

Trying to follow your steps to reproduce the issue. Opened this page https://surveyjs.io/Examples/Library?id=navigation-default&platform=Reactjs&theme=modern and translated it to finnish - it was translated ok for me. I opened this example in react codesandbox + separate window and then translated. Result was the same - no errors. Do I miss something?

[AbhishekKS]

Hi @tsv2013 , I can see this issue as well. I tried Arabic language. But it happens for Finnish as well. I tried out the below example in the new window.
https://surveyjs.io/Examples/Library?id=navigation-default&platform=Reactjs&theme=modern.

Attached are recording and console errors for your reference.

https://user-images.githubusercontent.com/13827554/129036424-db84cc6e-8346-41ab-913b-5d09fb584c8f.mp4

Console Error:

Thanks Abhishek

[tsv2013]

Unfortunately still can't reproduce the issue. Can you switch off all chrome extensions? My Chrome version is Version 92.0.4515.131 (Official Build) (64-bit)

[joker-777]

@tsv2013 Did you go to the next page. The error only happens after filling out the first page and then going to the next page. I just tested it in incognito Mode (no browser extensions) and definitely shows me this error. Please use this page for testing https://9cvi6.csb.app/ Version 92.0.4515.131 (Official Build) (64-bit)

[joker-777]

BTW, we had the same error with our own react code. It took me a long time to figure out the reason. It was that we used <></> for certain text elements where we add other text elements by condition. The solution was to use <span></span> instead.

[tsv2013]

Yes, I've got the error if press next page. We need to discuss this issue internally.

[tsv2013]

@andrew Could you take a look?

[andrewtelnov]

@joker-777 @tsv2013 It is a known issue with react and google translate. Here is the related issue in react repo. I strongly believe that facebook or google should come with the solution. It could take a lot of efforts from us to fix this issue in our code, since we have a lot of code in react and it is not certain, what should we change in our code, since it is written absolutely correct. We could re-introduce the issue again at any moment. We will keep this issue open and investigate it more deeply after releasing Creator V2 Beta. I believe it is better to find the reason and suggest the fix to react library, since It seems to me the bug in the code of a team from fb.

Thank you, Andrew

[joker-777]

@andrewtelnov Thanks for letting us know. It looks like Rect says that Google translate has to fix it, which takes quite some time.