fix: FluentTab not render automatically

[kamazheng]

🐛 Bug Report

When I updated to 4.3.0 from 4.2.1, my FluentTabs not render the new dynamic Tab automatically.

Version 4.2.1

Version 4.3.0 Version 4.3.0, only work for the first item of FluentSelect, it's very strange:

💻 Repro or Code Sample

<FluentTabs @bind-ActiveTabId="@SelectedTabId" Style="width:100%" Size="TabSize.Medium" @ref="fluentTabs">
    <CascadingValue Value="this" Name="KimiModeling">
        <FluentTab Label="Home" Icon="@(new Icons.Regular.Size24.Home())" Id="@homeTabId">
            <TablesGrid @ref="@tablesGrid" Tables="Tables" TableRecordCrudEvent="TableRecordCrudEvent" ReadOnly="@ReadOnly">
            </TablesGrid>
        </FluentTab>
        <FluentTab Label="TTT" Id="TTID">
            Empty
        </FluentTab>

        @if (TabItems?.Any() == true)
        {
            foreach (var item in TabItems)
            {
                var crudpage = item.GetCrudPageType();
                Dictionary<string, object?> parameters = new() { { nameof(BaseCrud<object>.AsDetailPage), ReadOnly } };
                <FluentTab Label="@item.TabTitle" Id="@item.TabId" Data="@item" @key="@item.TabTitle">
                    @if (crudpage != null)
                    {
                        <DynamicComponent Type="crudpage" Parameters="@item.GetCrudPageParameter(parameters)">
                        </DynamicComponent>
                    }
                </FluentTab>
            }
        }
    </CascadingValue>
</FluentTabs>

Inside FluentTabs host page to directly update the TabItems, it works fine. But if I try to use @ref to ref the FluentTabs host page, and call its same function, it won't work for not first item of FluentSelect (but after manul click the Tab title, it will works for the second call).

    public void AddAndSelect(KimiModdlingTabItem tabItem)
    {
        TabItems.Add(tabItem);
        SelectedTabId = tabItem.TabId;
        StateHasChanged();
    }

Try to force re-render, not work:

    public async Task ReFresh()
    {
        StateHasChanged();
        MethodInfo? method = fluentTabs?.GetType()?.GetMethod("StateHasChanged", BindingFlags.Instance | BindingFlags.NonPublic);
        method?.Invoke(fluentTabs, null);
    }

Why?

[kamazheng]

To use callback event to close the Tab, different behavior, it's very strange, the Tabs sometimes auto render, sometimes not, when I click "Close" button, to remove tab from tabs list, after any interaction on the page, it will not work for new version:

[vnbaaij]

Hi,

Please stop creating issues without code we can run and steps that describe how to reproduces the effect you are seeing. We can't copy and run any of the code you are posting. We are not here to debug your software project.

The images you include may be clear to you but do not say anything to me and do not convey the issue at all.

Closing this (again) as we can not reproduce.

BTW, that ReFresh method is looking really weird. Not clear what you are trying to achieve there.

[kamazheng]

I noticed that after update to version 4.3.0, sometime not detect the component property value changed. And, my code version 4.2.1, the SetParametersAsync() always triggered when my FluentSelect selectedoption changed even there's no parameter change, but after version 4.3.0, the SetParametersAsync() not trigger again when selectedoption changed.

[vnbaaij]

A fix has been implemented in ListComponentBase in commit b7ad573e:

Commit b7ad573e5437c7a0384d12f08411286167229ce9 Author: La Minh Phuc 72692627+pk9r327@users.noreply.github.com Date: maandag 18 december 2023 10:27 Parent: 940efee1

ListComponentBase, maintain consistency between SelectedOption and Value when Multiple is false (#1149)

This commit ensures that SelectedOption and Value consistently reflect each other. When SelectedOption is updated, Value is adjusted to maintain coherence, and conversely, changes to Value are reflected in the corresponding adjustment of SelectedOption. This fixes #983

Co-authored-by: La Minh Phuc pk9r327@outlook.com Co-authored-by: Vincent Baaij vnbaaij@outlook.com You probably need to adjust your code to work with this.

[hksalessio]

Actually, we have observed the same (or at least similar) behavior since updating to version 4.3.0. Our code example is quite complex, I'm still trying to reduce it to something less complicated, but something definitely has changed in the way FluentTabs rerender.

[vnbaaij]

Changes we made to FluentTab and FluentTabs from v4.2.1 to v4.3:

• We added Visible property to FluentTab
• We fixed #1194 for FluentTabs by determining if the components needs to re-renderor not <- Im guessing you are seeing a change because of this.

Because of what that last bullet fixes, I'm not expecting we are going to change anything back to the previous situation. This fix was, and is, needed.