Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

TabPane title ignores state changes

See original GitHub issue

Describe the bug

If I want to modify TabPane title - Tab or TabTemplate - i can’t do this, because lines https://github.com/ant-design-blazor/ant-design-blazor/blob/f48f61d1f47009c64b7eb3b08e61c6a2b8f00e02/components/tabs/TabPane.razor.cs#L100-L106 broke should render logic, while comment says that behavior created for draggable.

https://user-images.githubusercontent.com/12235437/140638557-00677dea-b23b-4cc3-9ed0-b28a02646468.mp4

Steps to reproduce

REPL example

Example with rendering badge on “important” tabs

<Switch @bind-Checked="showBadge" />
<Tabs>
    @foreach (var i in Enumerable.Range(0, 2))
    {
        <TabPane Key="@(i.ToString())">
            <TabTemplate>
                <Badge Dot="showBadge" Offset="(5, 0)">
                    @($"Tab title #{i}")
                </Badge>
            </TabTemplate>
            <ChildContent>
                Tab content #@i
            </ChildContent>
        </TabPane>
    }
</Tabs>
@code {
    private bool showBadge;
}

Exceptions (if any)

Further technical details

AntDesign Nuget Package version 0.10.2

Include the output of `dotnet --info`

 .NET SDK (reflecting any global.json):
 Version:   6.0.100-rc.2.21505.57
 Commit:    ab39070116

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.22494
 OS Platform: Windows
 RID:         win10-x64
 Base Path:   C:\Program Files\dotnet\sdk\6.0.100-rc.2.21505.57\

Host (useful for support):
  Version: 6.0.0-rc.2.21480.5
  Commit:  6b11d64e7e

.NET SDKs installed:
  5.0.101 [C:\Program Files\dotnet\sdk]
  5.0.201 [C:\Program Files\dotnet\sdk]
  5.0.202 [C:\Program Files\dotnet\sdk]
  5.0.401 [C:\Program Files\dotnet\sdk]
  6.0.100-preview.7.21379.14 [C:\Program Files\dotnet\sdk]
  6.0.100-rc.2.21505.57 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.All 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.All]
  Microsoft.AspNetCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 3.1.19 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.0-preview.7.21378.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.0-rc.2.21480.10 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 2.1.30 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 3.1.19 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.9 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.10 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.0-preview.7.21377.19 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.0-rc.2.21480.5 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 3.1.12 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.17 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.18 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 3.1.19 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.5 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.10 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 5.0.11 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.0-preview.7.21378.9 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.0-rc.2.21501.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

To install additional .NET runtimes or SDKs:
  https://aka.ms/dotnet-download

The IDE (VS / VS Code/ VS4Mac) you’re running on, and it’s version Microsoft Visual Studio Enterprise 2022 Preview (64-bit) Version 17.0.0 Preview 7.01

Issue Analytics

State:
Created 2 years ago
Reactions:1
Comments:8 (6 by maintainers)

Top GitHub Comments

2reactions

CAPCHIKcommented, Sep 28, 2022

My workaround is use custom state change component in each tab

public interface IModifiedStateNotifier
{
    void MofifiedUpdated(bool isMofified);
}

NotifiedTabContent

@implements IModifiedStateNotifier

<Badge Dot="isModified ?? false" Class="inherit-color">
    @if (ChildContent is null)
    {
        <AntDesign.Text>NO CONTENT</AntDesign.Text>
    }
    else
    {
        @ChildContent
    }
</Badge>
@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    private bool? isModified;

    public async void MofifiedUpdated(bool isModified)
    {
        if (isModified != this.isModified)
        {
            this.isModified = isModified;
            // Bug with too fast changing badge
            await InvokeAsync(async () => {
                await Task.Delay(100);
                StateHasChanged();
            });
        }
    }
}

And any component can use reference to invoke StateHasChanged

    <TabPane Key="settings" ForceRender>
        <TabTemplate>
            <NotifiedTabContent @ref="pollFormSettingsTabRef">
                @TabTitle("Setting", IconType.Outline.Setting)
            </NotifiedTabContent>
        </TabTemplate>
        <ChildContent>
            <PollFormSettings PollFormResponse="form"
                              PollFormResponseChanged="FormChanged"
                              ModifiedStateNotifier="pollFormSettingsTabRef"
                              @ref="pollFormSettingsRef" />
        </ChildContent>
    </TabPane>

You can also simply wrap the entire Tabs in a component that will have an event and a method for calling it, the content of the headers can be brought into the component, and subscribe to the event via CascadingParameter, and call its change from the content. I decided to do a more straightforward management in my project.

You can also see an error with the Badge here, but I haven’t created an Issue or PR yet

1reaction

dkosinskyicommented, Sep 29, 2022

It works, thx ❤️