Application Crash when google translated and dropdown is chose.

[khatiwada-Saurav]

Link to the code that reproduces this issue

https://github.com/khatiwada-Saurav

To Reproduce

https://d.pr/v/dr4Ss8

Current vs. Expected behavior

The application is crashing

Provide environment information

mac os

Which area(s) are affected? (Select all that apply)

Documentation

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

https://d.pr/v/dr4Ss8

[khatiwada-Saurav]

When you translate to another language and open any dropdown it crashes

[icyJoseph]

Hi,

This issue happens when you have floating text nodes, and React tries to update them, but ~unfortunately~, Google Translate has removed the node to place a font in its place. The typical solution is to wrap your floating text nodes with a span.

For example:

import { useReducer } from "react";

export default function App() {
  const [flag, toggle] = useReducer((x) => !x, true);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button onClick={toggle}>toggle text</button>

      <br />

      {flag && <>{"tomato"}</>}
    </div>
  );
}

If you translate the site containing that component, and then toggle the flag, it'll crash. The solution is to avoid those floating bits of text, so that React can refer to the wrapping HTML node, like a span:

import { useReducer } from "react";

export default function App() {
  const [flag, toggle] = useReducer((x) => !x, true);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <button onClick={toggle}>toggle text</button>

      <br />

      {flag && <span>{"tomato"}</span>}
    </div>
  );
}

Someone recently wrote an article about this, which is also a problem for other frameworks as well: https://martijnhols.nl/gists/everything-about-google-translate-crashing-react