[BUG] Google Translate issue

edersilva78 commented 1 week ago

Issue Summary

Hi, team.

We released a survey in our language (pt_BR) , wich is the same as our audience. However, some users reported duplicated text in some components, as shown here

In our investigation we found out that this behaviou is caused by Google translate kicking in on some browsers. Due to the user configuration (auto translate) and the fact that there is a label (Press Enter) present in the greeting card + the Formbrick branding.

We customized the labels for Next and Back buttons, but we were not able to customize the "Press Enter" message.

This is not related to multi language surveys.

Suggestions:

Allow the customization of the "Press Enter" message.
Allow setting the language tag <html lang="en">

Thanks.

Steps to Reproduce

Access a survey in a language other than English.
Accept google chrome's suggestion to translate to "your language", the same as the survey.
Move your mouse (until you move nothing happens).

Expected behavior

No duplicated text is displayed.

Other information

No response

Screenshots

No response

Environment

[ ] Formbricks Cloud (app.formbricks.com)
[X] Self-hosted Formbricks

Desktop (please complete the following information)

- docker image v2.1.1

mattinannt commented 1 week ago

@edersilva78 thanks for raising an issue :-) We will look into this and come up with a solution soon.

jonas-hoebenreich commented 1 week ago

jfyi: https://webmasters.stackexchange.com/questions/5043/how-can-i-prevent-google-mistakenly-offering-to-translate-a-page-to-english-when

Google Translate ignores language meta-data which can be pretty annoying (since language recognition starts before the rendering is complete). Adding some default text to the page (e.g. in the footer ) should solve this issue :)

gupta-piyush19 commented 6 days ago

Thanks, @edersilva78 for highlighting the issue, and @jonas-hoebenreich for your input. 🙌 I checked the feasibility of using Google Translate on Formbricks. It seems like the Google Translate font replacement doesn't work well with the React app. It is an ongoing issue and has not been fixed yet. 😕 Chromium forum: https://issues.chromium.org/issues/41407169 React Github: https://github.com/facebook/react/issues/11538 As a short-term fix for this, I've disabled translation throughout the app. You would still be able to create multi-language surveys. And for the welcome and thank-you cards, the default behaviour of pressing the enter button is to click the action button present over there, showing press enter text explicitly doesn't make much sense. Please let me know your thoughts on this. 😊

edersilva78 commented 5 days ago

Hi, @gupta-piyush19

checked the feasibility of using Google Translate on Formbricks.

The problem is google translate is kicking in. It guesses the form in in English (it in Portuguese) and tries to translate. Probably because of "press enter to continue" being present.

Sorry if I did not understand your aswer. But I meant to remove the "press enter" message, or to it be editable, such as the next and finish labels.

gupta-piyush19 commented 5 days ago

Hey @edersilva78 , I also initially had the same doubt that the English text was causing the issue, but unfortunately it's not. Actually, the internal working of React works in such a way that when Google Translate replaces the original text with translation, React internally tries to bring back the original text as well, thereby causing the issue of duplicate text. We've already removed the press enter message and disabled the Google translation until it gets fixed.

edersilva78 commented 5 days ago

Oh, I see. Thanks again. I'll wait for the image release, I'm running a container.

gupta-piyush19 commented 4 days ago

It's already released, you can try it right away. 😊

formbricks / formbricks