I have the following tab Menu

View of the blazor web server and the tab items

those tabs are being rendered using a component from Syncfusion (SfTabItem) and populated with a for each loop

 <SfTab Height="600px" @ref="TabBar" OverflowMode="OverflowMode.Scrollable">
     <TabAnimationSettings>
         <TabAnimationPrevious Effect="AnimationEffect.FadeIn" />
         <TabAnimationNext Effect="AnimationEffect.FadeIn" />
     </TabAnimationSettings>
     <TabItems>
         @if (OrderStatusPopupVisibility == false)
             @foreach (ProductCategory item in Categories?.OrderBy(o => o.SortIndex))
             {
                 <TabItem>
                     <HeaderTemplate>
                         <div style="border-radius:15px;margin:5px;padding:5px 10px; background-color:#124de2;color:white;"> @(item.Name) </div>
                     </HeaderTemplate>
                     <ContentTemplate>
                         <div class="categoriesTitle">
                             @item.Name
                         </div>

                         @foreach (var product in Products!.Where(q => q.ProductCategoryId == item.ProductCategoryId))
                         {
                             <div class="productsTable">
                                 <table width="100%" style="max-height:100px;">
                                     <tr style="height:20px">
                                         <td class="productsImageCell" rowspan="2">
                                             <img style="border-radius:10px;" width="100px" height="100px" src="data:@ProductImages?.First(q => q.ProductId == product.ProductId).Format;base64,@ProductImages?.First(q => q.ProductId == product.ProductId).ImageData" />
                                         </td>
                                         <td class="productsTableCell" style="font-size:16px;font-weight:bolder;">@product.Name</td>
                                         <td class="productsPriceCell">sFr. @product.Price</td>
                                     </tr>
                                     <tr style="height:60px;margin:0px;text-overflow:clip;">
                                         <td class="productsTableCell" style="overflow:clip; " colspan="1">@product.Description</td>
                                         <td class="productsButtonCell">
                                             @if (@OrdersEnabled)
                                             {
                                                 <button @onclick="@(e => click(product))">
                                                     <img id="addCartIcon" src="./images/add-cart.svg" alt="Hinzufügen" />
                                                 </button>
                                             }
                                         </td>
                                     </tr>
                                 </table>
                             </div>
                         }
                     </ContentTemplate>
                 </TabItem>
             }
     </TabItems>
 </SfTab>

In the first screenshot you will also see a language selector I added using the classic google widget element script

<div id="google_translate_element"></div>
<script type="text/javascript">
    function googleTranslateElementInit() {
        new google.translate.TranslateElement({
            pageLanguage: 'de',
            includedLanguages: 'es,en,fr,pt,zh-CN,it,de',
        }, 'google_translate_element');
    }


</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

The problem is that if you don’t translate the page there’s no issue, but if you move from tab to tab, previously changing the language, the tab items and tab title are not updated, actually this is now live and you can take a look to it:

https://mydinner.ch/QrCodeDeskOrder/56DAE1F9-2E21-4686-8FB7-354E3359ACAB/EF992EFF-082E-4987-A24B-6A6EEBF19537

I know this might be slightly difficult, specially because the google script is not really helpful for debbugin, hopefully someone might have an idea, thanks in advance!

I even added a refresh button and tried to refresh the page after changing language, same problem, tried to re-render the TabItem component (just the view hidding it and displaying it with a bind-visible) when moving from tabs, same problem