Block auto translate . internationalization i18n translation problem

Flow
1

Hi,
i’m trying to block browser auto translate suggestions. For now i found some advice in there

but that solution doesn’t work for me even if i use one MainLayout (AppLayout) for each of my views.

I paste my code snippets

public class MainLayout extends AppLayout {

//.  fields, constructor, etc () {

CustomI18NProvider.disableAutoTranslation(UI.getCurrent());

//  

}

and then in each of my view class

@Route(value = "machines")
@PageTitle("Machine view")
public class MachineView extends MainLayout implements BeforeEnterObserver {

//

}


@Component
@Getter
@Setter
public class CustomI18NProvider implements I18NProvider, UIInitListener {

//

@Override
    public void uiInit(UIInitEvent event) {
        UI ui = event.getUI();
        ui.getPage().executeJs("document.querySelector('html').setAttribute('translate', 'no');");
    }

    public static void disableAutoTranslation(UI ui) {
        ui.getPage()
                .executeJs("document.documentElement.setAttribute('translate', 'no');"
                        + "document.body.setAttribute('translate', 'no');"
                        + "var meta = document.createElement('meta');"
                        + "meta.name = 'google';"
                        + "meta.content = 'notranslate';"
                        + "document.head.appendChild(meta);");
    }
}

Currently i have problem with auto translation suggestion from my browser (chrome) what is extra annoying.

I do support in my app three language for now, one of them is de_DE but my app starts with en_US as default choice. The point is that even if my app starts with en_US, chrome ask me about translate de_DE to my local language. It’s looks wired for user if first view is in english and browser ask about translating de

To be honest i’m java focused person and that js part is generated by AI. Also about html i have only basic knowledge.

Thanks for any suggestions and advice

2

Customize the auto generated index.html and simple apply translate=no to it

3

I guess an AppShellConfiguration can also be used to inject the change into the HTML if you prefer keeping everything in Java.

4

Thank you guys!

For now modification in index.html looks like problem has been solved

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta name="google" content="notranslate" />

  <script>
    document.documentElement.setAttribute('translate', 'no');
    document.body.setAttribute('translate', 'no');
  </script>

but for sure i will try also solution with AppShellConfiguration and then gonna update this discussion