Prevent Google Translate from Breaking the shadcn/ui Select

shadcn/ui’s Select component is a popular choice for accessible dropdowns, but there is a subtle bug when users view your page with Google Translate. When the extension rewrites DOM nodes with translated text, it also reorders internal spans that the Select relies on. The result? Trigger and value elements disappear, leaving users with an empty dropdown.

This behavior is tracked in the official issue tracker (shadcn-ui/ui#852) and can surface on any public marketing site or dashboard where visitors rely on automatic translation. If your product targets global audiences, it is worth proactively guarding against it.

Why the Select Breaks Under Translation

Google Translate modifies text nodes inside the Select to display localized content. In the process it wraps or replaces the span that the library uses to calculate trigger width and position. Because the DOM structure changes, the Select’s internal state no longer matches the expected markup and React fails to reconcile it correctly. Users end up clicking a trigger that renders no value or closes immediately.

The Quick Fix: Opt Out of Translation

Until the component handles translation-aware rendering internally, the safest workaround is to opt your Select out of auto-translation. You can achieve this by wrapping the component—and each item label—in elements with translate="no". This tells translation tools to leave the DOM untouched while keeping the rest of the page translatable.

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

By isolating the Select, you preserve the component’s structure while still presenting localized text elsewhere. Pair this with translated labels stored outside the Select (e.g., in a legend or description) if you need to communicate the option meaning to users in their language.

Bonus: Document the Workaround

If your team relies on shadcn/ui, document this workaround in your internal component library guidelines or Storybook examples. That makes the fix discoverable for other engineers and prevents the bug from resurfacing when new dropdowns are built.

Until the upstream issue is resolved, this small attribute is the difference between a functional Select and a broken experience for international visitors. Proactively adding it keeps your UI resilient and inclusive.

---