Select component broken when site is translated via Google translate page or browser translate

[func0x]

If you use Select component example in here https://ui.shadcn.com/docs/components/select then translate page to different language in browser address bar, then select something, change selection, you have error "Application error: a client-side exception has occurred (see the browser console for more information)" froze whole site in console is "DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node"

[dan5py]

Hi @calciferlo. Using Google Translate adds an element to the page and NextJS complains because it doesn't know where the element came from. Adding translate="no" to the html tag should fix the issue.

[anson0370]

Is disabling the translation of the entire HTML the only way to avoid this issue? Sometimes users might indeed need the translation.

[DaniloAlvesantos]

Did it work ?

[func0x]

I use translate="no" and it's work. Close the issue.

[anson0370]

Wrapping the value in SelectItem with a <span> should be able to solve this problem.

Like below:

<Select>
  <SelectTrigger>
    <SelectValue/>
  </SelectTrigger>
  <SelectContent>
    {menuItems.map((item) => (
      <SelectItem key={item} value={item}>
        <span>{item}</span>
      </SelectItem>
    ))}
  </SelectContent>
</Select>