Two Way Binding with AutoComplete not working

[Michael Salzlechner]

added a few autocomplete forms but when i added one to a tab page i noticed issues with the binding

for example putting the following on a tab page and switching tab pages will not show the proper data when switching back

                <SfAutoComplete @bind-Value="selcountry" TValue="Countries" TItem="Countries" Placeholder="e.g. Australia" DataSource="@LocalData">

                    <AutoCompleteFieldSettings Value="Code" Text="Name"></AutoCompleteFieldSettings>

                    <AutoCompleteTemplates TItem="Countries">

                        <ItemTemplate>

                            <span><span class='name'>@((context as Countries).Code)</span><span class='country'>@((context as Countries).Name)</span></span>

                        </ItemTemplate>

                    </AutoCompleteTemplates>

                </SfAutoComplete>

same can be shown by adding the following button

<SfButton @onclick="@(() => { selcountry = new Countries() { Code = "AT", Name = "Austria" }; })">Show AT</SfButton>

[Ponmani Murugaiyan]

 Hi Michael, 

Thanks for contacting Syncfusion support. 

Based on the information you have provided, we suspect that dynamically selecting items from a popup or updating a value with a button click does not remain in the component after navigating and returning to the same page. So we suggest you enable the property EnablePersistence in SfTab, so that the value persists between page reloads. 

https://blazor.syncfusion.com/documentation/tabs/how-to/set-state-persistence-of-the-tab-component/ 

<SfTab ID="Tab" EnablePersistence="true"> 

    <TabItems> 

        <TabItem> 

            <HeaderTemplate>Calendar</HeaderTemplate> 

            <ContentTemplate> 

                <SfAutoComplete @bind-Value="@AutoVal" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@LocalData"> 

                    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings> 

                </SfAutoComplete> 

            </ContentTemplate> 

        </TabItem> 

        <TabItem> 

            <HeaderTemplate>Calendar</HeaderTemplate> 

            <ContentTemplate> 

                <SfDatePicker TValue="DateTime?" Placeholder='Choose a Date'></SfDatePicker> 

            </ContentTemplate> 

        </TabItem> 

      </TabItems> 

</SfTab> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete_StatePersist-2060017620 

Kindly check with the above sample meets your requirement. If issue still exists, please revert us with simple issue replicating sample, which helps us to check and provide you the solution at earliest. 

Regards, 

Ponmani M 

[Michael Salzlechner]

thank you but i do not think that is the issue. 

the problem exists without using tabs. 

test the example i posted without tabs but with the button and you will see it fail.

[Ponmani Murugaiyan]

Hi Michael 

Thanks for the update. 

We would like to know you that the reported issue can be resolved by enabling the property EnablePersistance in the AutoComplete component. But while enabling this property with complex data binding, we are facing console error and we have logged this issue as bug in our end and the fix will be included in one of the upcoming patch release scheduled on or before end of June 2021. Once the issue has been resolved, your reported requirement can be achieved. You can track the status using the below feedback link.  

Feedback: https://www.syncfusion.com/feedback/25965/ 

We appreciate your patience until then. 

Regards, 

Ponmani M