Error when using <Select /> and Google Chrome with translate

[juliuslissau]

What package has an issue?

@mantine/core

Describe the bug

When using Google Chrome and using the "translate this page" functionality, and the user selects an option on the Select or MultiSelect component (perhaps other components as well?), then the error from the screenshot will occur:

Tested on the newest version of Chrome (I think), version 119 and Mantine 7.2.2 (but I think this might have been an issue for a longer period of time).

Both happens on my website and on the Mantine docs.

What version of @mantine/* packages do you have in package.json? (Note that all @mantine/* packages must have the same version in order to work correctly)

7.2.2

If possible, please include a link to a codesandbox with a minimal reproduction

No response

Do you know how to fix the issue

None

Do you want to send a pull request with a fix?

None

Possible fix

Seems like you can disable Google translate option entirely, but of course nice to allow on your website: https://stackoverflow.com/a/76004257/8963287

Also, the problem might be that the Select (and similar components) uses React Fragment instead of a div or similar. This answer says switching away from Fragments solved a similar issue: https://stackoverflow.com/a/74627339/8963287

[manuelbosi]

From this answer https://stackoverflow.com/a/65110044/7491710

Sometimes it happens when users use Google Translate, it mutates text nodes, and React breaks on the next render.

I've made some tests and I figured out the problem is that the option renders its label as pure string without wrapping in any html element.

For now I found this two:

1. Disable translation on each select option
2. Wrap option label with something like span or label element

@rtivital I suggest to take the second option, as user I would expect that the google translation works.
I made a PR, let me know if need edits 👍