Tabs/TabsContent doesn't work with TabsRenderMode.LazyLoad

[hotfirewire]

Describe the bug
When setting the RenderMode on the Tabs, using TabContent, to LazyLoad, all the tabs content gets loaded by default.

To Reproduce
Steps to reproduce the behavior:
`
@code {
string selectedTab = "overview_tab";
string selectedPanel = "overview_tab";

private Task OnSelectedTabChanged(string name) {
    Console.WriteLine($"Tab Selected {name}");
    selectedTab = name;
    selectedPanel = name;
    tabsContent.SelectPanel(name);
    return Task.CompletedTask;
}
void OnSelectedPanelChanged(string name) {
    selectedPanel = name;
}

}

Overview MtM VaR Documents Activity Settings

`

Expected behavior
The default tab would be loaded onLoad. Then each tab content would be loaded when the tab is clicked.

[David-Moreira]

Hello @hotfirewire
LazyLoad should only load once upon visiting the tab. But then it already has the content loaded.
Maybe you are looking for LazyReload which indeed will keep reloading everytime.

You can check how they work here, please check LazyReload example, you can type in the input boxes to get a feel:
https://blazorise.com/docs/components/tab

[hotfirewire]

Hello @David-Moreira ,
Thank you for getting back to me. Yes, I agree that is the expected behaviour; however, the tab already loads the data when the page is loaded before I visit any of the other tabs. Here is an example of what I'm seeing:

I've not clicked on the tab MtM and the data has already loaded.

Thank you.

[David-Moreira]

Hello @hotfirewire
We're going to need a full reproducible, as it seems to be working correctly.

Here's the example I tested:

<Tabs RenderMode="TabsRenderMode.LazyLoad" SelectedTab="selectedTab">
    <Items>
        <Tab Name="tab1">Tab 1</Tab>
        <Tab Name="tab2">Tab 2</Tab>
    </Items>
    <Content>
        <TabPanel Name="tab1">
            This Tabs component is set to <code>LazyLoad</code> mode, meaning each tab will only be rendered/loaded the first time it is visited.
            This is specially useful when you want to delay some heavy or long waited operations for when the tab is actually clicked instead.
            <TextEdit></TextEdit>
        </TabPanel>
        <TabPanel Name="tab2">
            <TextEdit></TextEdit>
        </TabPanel>
    </Content>
</Tabs>


@code {
    string selectedTab = "tab1";

    private Task OnSelectedTabChanged( string name )
    {
        Console.WriteLine( $"Tab Selected {name}" );
        selectedTab = name;
        //tabsContent.SelectPanel( name );
        return Task.CompletedTask;
    }

}

[github-actions]

Hello @hotfirewire, thank you for your submission. The issue was labeled "Status: Repro Missing", as you have not provided a way to reproduce the issue quickly. Most problems already solve themselves when isolated, but we would like you to provide us with a reproducible code to make it easier to investigate a possible bug.

[stsrki]

@David-Moreira I believe the error happens when the user has separate Tabs and TabsContent.

eg

<Tabs RenderMode="TabsRenderMode.LazyLoad" SelectedTab="selectedTab">
   ...
</Tabs>

<TabsContent SelectedPanel="selectedTab">
   ...
</TabsContent >

It seems that TabsContent is missing the RenderMode parameter.

[David-Moreira]

I see I'll give it another go. But that's why It's important to provide a clear reproducible so we don't have to play a guessing game. :)

I will let you guys know if I'm able to reproduce.

[hotfirewire]

@David-Moreira yes sorry about that I'll make sure to include the full repro next time I post any issues. @stsrki had it right, I'm using the tabs and tab content separately. I have the RenderMode="TabsRenderMode.LazyLoad" set on the but it doesn't seem to apply to the

[David-Moreira]

Yep, can confirm. TabsContent does not support RenderMode. Since the Tabs component does not communicate with it, it does not know about the RenderMode setting.

We'll have to fix this in a future release, most likely by introducing RenderMode as a new Parameter in the TabsContent
This is the reproducible code:

<Tabs RenderMode="TabsRenderMode.LazyLoad" SelectedTab="selectedTab" SelectedTabChanged="OnSelectedTabChanged" >
    <Items>
        <Tab Name="tab1">Tab 1</Tab>
        <Tab Name="tab2">Tab 2</Tab>
    </Items>
</Tabs>


<TabsContent @bind-SelectedPanel=selectedTab>
    <TabPanel Name="tab1">
        This Tabs component is set to <code>LazyLoad</code> mode, meaning each tab will only be rendered/loaded the first time it is visited.
        This is specially useful when you want to delay some heavy or long waited operations for when the tab is actually clicked instead.
        <TextEdit></TextEdit>
    </TabPanel>
    <TabPanel Name="tab2">
        <TextEdit></TextEdit>
    </TabPanel>
</TabsContent>


@code {
    TabsContent tabsContent;
    string selectedTab = "tab1";

    private Task OnSelectedTabChanged( string name )
    {
        Console.WriteLine( $"Tab Selected {name}" );
        selectedTab = name;
        return Task.CompletedTask;
    }

}

If you really want the feature in the time being, I believe you're able to implement it by managing the SelectedTab and figuring out whether the tab was already selected or not and render it's content accordingly.