Doesn't work correctly when 2 gtranslate blocks are enabled

I'm getting the same issue in one of the project

This only fixes the issue when cdn is turned off, otherwise it uses the code from the cdn where the javascript is not patched.
I think the root cause is here https://git.drupalcode.org/issue/gtranslate-3396734/-/blob/3396734/src/P...
It will execute that finction on each build resulting in multiple select lists, ran in the build function here https://git.drupalcode.org/issue/gtranslate-3396734/-/blob/3396734/src/P...

I've the CDN turned off but still having the same issue.
I'm loading the block in my page template under two different wrappers for desktop and one at a different location for mobile
{{ drupal_entity('block', 'gtranslate') }}
It was working for me in 8.x branch but after 3.x this seem to have broken and now both blocks are loading one after the other.

Attaching screenshot as mentioned in #5

@BWilliams1992 is on to something with the javascript getting included twice. This module needs some love.

This refactor is headed in the right direction but wasn't working for me. https://www.drupal.org/project/gtranslate/issues/3346829 🐛 Refactor to use libraries and compatibility with Big Pipe Needs work

My sinful quick fix for now. If the block is found more than once I'm just doing a string replace to remove the javascript from getting added again. Be sure you pay attention to which widget you are using.

function hook_preprocess_block(&$variables) {
  if ($variables['plugin_id'] == 'gtranslate_block') {
    if (isset($variables['attributes']['id']) && $variables['attributes']['id'] != 'block-gtranslate') {
      // Hack to remove the script tag from the gtranslate block if included more
      // than once on the page. See https://www.drupal.org/project/gtranslate/issues/3396734.
      $script = "<script>(function(){var js = document.createElement('script');js.setAttribute('src', 'https://cdn.gtranslate.net/widgets/latest/ln.js');js.setAttribute('data-gt-orig-url', '/');js.setAttribute('data-gt-orig-domain', 'tpa.lndo.site');document.body.appendChild(js);})();</script>";
      $variables['content']['#gtranslate_html'] = str_replace($script, '', $variables['content']['#gtranslate_html']);
    }
  }
}

The solution of the Merge request only works for the "Dropdown" widget. I added another solution for the "Nice Dropdown with Flags" widget. We will probably need a different solution for each widget type.

🐛 Refactor to use libraries and compatibility with Big Pipe Needs work is definitely a big improvement on the overall situation.

For our site, where we are using the "Dropdown" widget, the widget renders twice correctly, but it's also appending two <div id="google_translate_element2"> elements to the first widget on the page, see screenshot below:

After applying 🐛 Refactor to use libraries and compatibility with Big Pipe Needs work , it seems to do better in that the "google_translate_element2" element gets added after each corresponding widget, but it still has the problem that the same ID is being used twice. This is causing a ding by our accessibility testing tools, and it's malformed HTML to use the same ID twice.

(Sorry wrong screenshot attached, fixing previous comment)

We are experiencing this issue as well. We used a modified version of the preprocessor function in #8 🐛 Doesn't work correctly when 2 gtranslate blocks are enabled Active to address. This fixed the problem for us.

We were having the same issue - when placing the GTranslate block within a custom theme region we were seeing the dropdown menu duplicated on the page. I patched the module using the two modified js files from fabianfiorotto → 's commit in comment #8 🐛 Doesn't work correctly when 2 gtranslate blocks are enabled Active , and that resolved the issue for us.

Here is another version of the hack to remove duplicate GTranslate scripts. This one is a little simpler — it fully removes both script tags on the additional blocks. No need to customize individual block ids or do string replacement with the domain and path anymore.

/**
 * Implements hook_preprocess_block().
 */
function hook_preprocess_block(array &$variables): void {

  // Remove duplicate GTranslate scripts from the block if included more than once.
  // May be fixed in future GTranslate versions when the script is moved to the library level.
  // See https://www.drupal.org/project/gtranslate/issues/3396734
  if ($variables['plugin_id'] === 'gtranslate_block') {

    // Check if script was already loaded.
    $loaded = &drupal_static(__FUNCTION__ . '_gtranslate_loaded', FALSE);
    if (!$loaded) {
      // Set flag to remove scripts in subsequent blocks.
      $loaded = TRUE;

    } else {
      // Remove existing script tags.
      $variables['content']['#gtranslate_html'] = preg_replace(
        '/(<script>[^<]*?<\/script>)/s',
        '',
        $variables['content']['#gtranslate_html'],
      );
    }
  }
}