Duplicated
Last Updated: 22 Mar 2020 08:23 by ADMIN
Uluç
Created on: 20 Mar 2020 07:01
Category: UI for Blazor
Type: Bug Report
0
Controls Are Not Holding Their Values @ 2.9.0

Hello,

 

I have updated Blazor UI to the latest version (2.9.0) and some of my controls lost their state.

Let me explain:

I have a page with 4 tabs (TelerikTabStrip), if i choose the value of a dropdown (TelerikDropDown) in the first tab and move to the second tab and then come back to the first tab, the value would be lost and the dropdown is empty however, if i put a breakpoint and look at the model, it shows that the value is still preserved.


Is there something i am missing? is this an update gone wrong (on my side)?

 

I have downgraded back to 2.8.0 and it works as expected.

 

Thanks.

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
4 comments
ADMIN
Marin Bratanov
Posted on: 22 Mar 2020 08:23

Hello,

Let's Follow this in the first report I saw that reproduces this: https://feedback.telerik.com/blazor/1458630-combobox-does-not-show-selected-value-in-2-9-0-correct-item-and-value-are-selected-though

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Geoff Davis
Posted on: 22 Mar 2020 00:52
I have just reported this as a bug on 2.9.0 for combobox, dropdownlist works as expected. Downgrading to 2.8.0 fixes the problem without intervention.
Uluç
Posted on: 21 Mar 2020 11:11

Hello Marin,

 

Thanks for the reply,

In the provided snippet I just changed the TelerikDropDownList into TelerikComboBox and I achieved the bug.

Can you change it from DropDown to ComboBox?

 

@MyItem
<TelerikTabStrip>
    <TabStripTab Title="First">
        <TelerikComboBox Data="@MyList" @bind-Value="@MyItem">
        </TelerikComboBox>
    </TabStripTab>
    <TabStripTab Title="Second" Disabled="true">
        Second tab content. This tab is disabled and you cannot select it.
    </TabStripTab>
    <TabStripTab Title="Third">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

@code {
    protected List<string> MyList = new List<string>() { "first", "second", "third" };

    protected string MyItem { get; set; } = "second";
}

 

Thanks.

ADMIN
Marin Bratanov
Posted on: 20 Mar 2020 14:57

Hello,

The snippet below seems to work fine for me, could you modify it to showcase your setup and the problem?

The key things are:

  • the tabs dispose old content, there is only one rendered tab (see more here) which may be disposing the data
  • when using child components that repeat across tabs, new data is to be provided through OnParametersSet, or by using keys (read more at the very end of this article)

If the method that loads data is "async void" then the data may come back after an await call, but the method won't be waiting for that so the StateHasChanged() call will occur before you have the actual data, so it won't be rendered in the component. The usual solution to that is to use an "async Task" method, that will wait for the execution of awaited calls inside, so that at the end of the method the framework will update the UI with the data present.

 

@MyItem
<TelerikTabStrip>
    <TabStripTab Title="First">
        <TelerikDropDownList Data="@MyList" @bind-Value="@MyItem">
        </TelerikDropDownList>
    </TabStripTab>
    <TabStripTab Title="Second" Disabled="true">
        Second tab content. This tab is disabled and you cannot select it.
    </TabStripTab>
    <TabStripTab Title="Third">
        Third tab content.
    </TabStripTab>
</TelerikTabStrip>

@code {
    protected List<string> MyList = new List<string>() { "first", "second", "third" };

    protected string MyItem { get; set; } = "second";
}

 

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor