Autocomplete not working with latest update

[SZL]

Hello,

After I update the Syncfusion controls to the latest version, the AutoComplete control stops working. It not send any request to the server.

My code:

                                                <SfAutoComplete Highlight="true" MinLength=2 TValue="string" TItem="OptionDto<int?>" TabIndex="6"

                                                                Placeholder="@GetPlaceHolder(nameof(AddOrEditDto.Cikk))" Autofill="true"

                                                                @bind-Value="@AddOrEditDto.Cikk.Text"

                                                                FloatLabelType="FloatLabelType.Always">

                                                    <SfDataManager Url="api/cikk/options" CrossDomain="true" Adaptor="Adaptors.UrlAdaptor" Offline="false"></SfDataManager>

                                                    <AutoCompleteEvents TValue="string" TItem="OptionDto<int?>" ValueChange="@((e) => ValueChange(e, AddOrEditDto))">

                                                    </AutoCompleteEvents>

                                                    <AutoCompleteFieldSettings Text="Text" />

                                                </SfAutoComplete>

When I type something and press enter, the following error appear:

In this latest version we found 3 bugs that works before (Toast notifications, DropDown refresh, I think this problem too).

I would like ask how can we make sure, that every control works well in the latest versions? Currently we are afraid to update to the new versions because earlier working funcions not working in some cases. This causes lot of extra testing and needs search for workarounds if something not works and this takes a lot of time after every version update. Do you use some automated tests before publish new software versions?

Thank you very much for help and informations!

BR, SZL

[UdhayaKumar Duraisamy]

Hi,

We are validating the requirement. We will update the further details in two business days (18^th May 2022).

Regards,

Udhaya Kumar D

[Vinitha Jeyakumar]

We have considered the reported issue "Request not sent to the server when using AutoComplete control with URL Adaptor" as a bug from our end and the fix for the issue will be included with our upcoming patch release on 31^st May 2022.

You can now track the status of the reported issue through the below feedback,

https://www.syncfusion.com/feedback/35141/request-not-sent-to-the-server-when-using-autocomplete-control-with-url-adaptor

[Vinitha Jeyakumar]

We have included the fix for the issue "Request not sent to the server when using AutoComplete control with URL Adaptor" with our patch release version 20.1.58. So, please upgrade your package to the latest to resolve the issue from your end.

Release notes: https://blazor.syncfusion.com/documentation/release-notes/20.1.58?type=all#autocomplete

[SZL]

Hello,

Thank you for the update. Now the request is going to the server, but too much. 

I have a grid with custom add/edit form. The add/edit form showing inside a dialog.

When I click Add button and watch the Network tab of the browser, I see this:

So the request going to the server 4 times. I not click into the autocomplete this all request started when the dialog opens. 

The first 2 request queries the first 20 records of the datasource (the two request are same):

The 3rd and 4rt request going to the server with 'equal' where filter (I dont know what is this):

I think the request should go to the server only, when I click inside the autocomplete, and start typing. So on initial loading the request count should be 0, instead of 4. When I click inside the autocomplete the request should be go to the server (I think 1 request). This is when parameter Offline="false".

When parameter Offline="true", I think 1 request should go to the server on initial loading and the autocomplete should use the downlaoded datasource. In this case, it does not need to be sent requests to the server when I type into the autocomplete textbox.

This is just my opinion, but the count of the requests definitely not good.

My autocomplete code:

                                            <SfAutoComplete Highlight="true" MinLength=2 TValue="string" TItem="OptionDto<int?>" TabIndex="6"

                                                            Placeholder="@GetPlaceHolder(nameof(AddOrEditDto.Cikk))"

                                                            @bind-Value="@AddOrEditDto.Cikk.Text"

                                                            FloatLabelType="FloatLabelType.Always">

                                                <SfDataManager Url="api/cikk/options" CrossDomain="true" Adaptor="Adaptors.UrlAdaptor" Offline="false"></SfDataManager>

                                                <AutoCompleteEvents TValue="string" TItem="OptionDto<int?>" ValueChange="@((e) => ValueChange(e, AddOrEditDto))">

                                                </AutoCompleteEvents>

                                                <AutoCompleteFieldSettings Text="Text" />

                                            </SfAutoComplete>

Thank you!

BR, SZL

[Vinitha Jeyakumar]

We have tried to reproduce the reported issue by adding the Autocomplete control inside a grid dialog edit template. But we didn't face any issues as you reported. we have also prepared a sample for your reference,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/UrlAdaptorSample22257171-8846686121305341255

Can you please share us with the entire code snippet or issue reproducing sample to further validate the issue on our end.

[SZL]

Thank you!

I check your example code, but I not see any Network traffic in browser dev tools in the "Add" dialog.

The network tab is empty when I type into the textbox.

Its very hard to create a working sample from my side, because there are lot of base classes and references, but my (cleaned) code is:

    <SfGrid ID="Grid"

            @ref="PrimaryGrid"

            TValue="AnyagRendelesListItemDto"

            Query="GridQuery"

            AllowPaging="true"

            AllowFiltering="true"

            AllowSorting="true"

            AllowReordering="true"

            AllowResizing="true"

            AllowExcelExport="true"

            AllowPdfExport="true"

            ShowColumnChooser="true"

            Toolbar="@GetPrimaryGridToolbarItems()"

            Height="100%"

            Width="100%">

        <SfDataManager @ref="PrimaryDataManager"

                       Url="api/anyagrendeles"

                       Adaptor="Adaptors.UrlAdaptor"

                       Offline=false>

        </SfDataManager>

        <GridEditSettings AllowAdding="true" AllowEditOnDblClick="false" ShowDeleteConfirmDialog="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog" />

        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings>

        <GridEvents OnToolbarClick="PrimaryToolbarClick"

                    OnActionBegin="PrimaryGridActionBeginHandlerAsync"

                    OnActionComplete="PrimaryGridActionCompletedHandlerAsync"

                    RowSelected="PrimaryGridRowSelectHandler"

                    RowDeselected="PrimaryGridRowDeSelectHandler"

                    DataBound="PrimaryGridDataBoundHandler"

                    OnLoad="PrimaryGridLoadHandler"

                    TValue="AnyagRendelesListItemDto" />

        <GridColumns>

            @* Ha mindenhonnan ki van véve az AutoFit akkor a grid szélességéhez méretezi az oszlopokat, nem a width szerint! Reszponzívat is lehet: HideAtMedia *@

            <GridColumn HeaderText="Műveletek" Width="150px" AllowFiltering="false" TextAlign="TextAlign.Center">

                <GridCommandColumns>

                    <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-edit", CssClass="e-flat gp-gridedit-button", Disabled=IsBusy })"></GridCommandColumn>

                    <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat gp-gridedit-button", Disabled=IsBusy })"></GridCommandColumn>

                </GridCommandColumns>

            </GridColumn>

            <GridColumn Field=@nameof(AnyagRendelesListItemDto.Id) IsPrimaryKey="true" TextAlign="TextAlign.Right" Width="140" Visible="false"></GridColumn>

            <GridColumn Field=@nameof(AnyagRendelesListItemDto.Sorszam) Width="90px" HideAtMedia="(min-width: 700px)" AutoFit="true" FilterSettings="@(new FilterSettings{ Operator = Operator.Contains })"></GridColumn>

        </GridColumns>

    </SfGrid>

    <VisibilityControl Description="Grid-Dialog-AE" Mode="eVisibilityMode.Clear" IsVisible="@IsAddOrEditDialogVisible">

        <SfDialog ID="mainDialogAE" CssClass="gp-dialog w1000 hide-dialog-footer" Width="1000px" Height="auto" ShowCloseIcon="true" AllowDragging="true" CloseOnEscape="true" EnableResize="false" IsModal="true">

            <DialogTemplates>

                <Content>

                    <div class="gp-form">

                        <LoaderControl IsVisible="@(IsLoaderVisibleForSubmit || !AddOrEditDataSourceLoaded || IsAllComboLoading || (IsEdit && !DataBounded))"></LoaderControl>

                        <EditForm id="@AddOrEditFormId" @ref="AddOrEditForm" class="formTAB" Model="@AddOrEditDto" OnValidSubmit="HandleAddOrEditFormValidSubmit" OnInvalidSubmit="HandleAddOrEditFormInvalidSubmit">

                            <DataAnnotationsValidator />

                            <ServerSideValidator @ref="AddOrEditFormServerSideValidator" />

                            <div class="gp-form-content">

                                <div class="row">

                                    <div class="form-group col-md-6">

                                        <MyFieldValidationMessage TValue="string" For="@(() => AddOrEditDto.Megrendelo)" TooltipPosition="Position.TopCenter">

                                            <SfTextBox @bind-Value="@AddOrEditDto.Megrendelo" TabIndex="5" FloatLabelType="FloatLabelType.Always" Placeholder="@GetPlaceHolder(nameof(AddOrEditDto.Megrendelo))" TValue="string"></SfTextBox>

                                        </MyFieldValidationMessage>

                                    </div>

                                    <div class="form-group col-md-6">

                                        <div class="gp-inline-form-elements">

                                            <SfAutoComplete Highlight="true" MinLength=2 TValue="string" TItem="OptionDto<int?>" TabIndex="6"

                                                            Placeholder="@GetPlaceHolder(nameof(AddOrEditDto.Cikk))"

                                                            @bind-Value="@AddOrEditDto.Cikk.Text"

                                                            FloatLabelType="FloatLabelType.Always">

                                                <SfDataManager Url="api/cikk/options" CrossDomain="true" Adaptor="Adaptors.UrlAdaptor" Offline="false"></SfDataManager>

                                                <AutoCompleteEvents TValue="string" TItem="OptionDto<int?>" Created="@CreatedHandler" ValueChange="@((e) => ValueChange(e, AddOrEditDto))">

                                                </AutoCompleteEvents>

                                                <AutoCompleteFieldSettings Text="Text" />

                                            </SfAutoComplete>

                                        </div>

                                    </div>

                                </div>

                            </div>

                            <div class="aebuttons">

                                <SfButton id="frmMainAESubmit" CssClass="allowEnter" tabindex="11" IsPrimary="true">Mentés</SfButton>

                                <SfButton Type="button" CssClass="allowEnter" tabindex="12" OnClick="@btnCancelGridEdit">Mégse</SfButton>

                            </div>

                        </EditForm>

                    </div>

                </Content>

            </DialogTemplates>

            <DialogPositionData X="center" Y="center"></DialogPositionData>

        </SfDialog>

    </VisibilityControl>

So I dont use the build-in add/edit dialog, I have a custom EditForm. I prevent the default Grid behavior in 

ActionBeginHandlerAsync event with: 

  args.PreventRender = true;

  args.Cancel = true;

and use my form.

I think this is not an easy reproducable problem. Do you have any idea how can I debug somehow this problem?

Thank you!

BR, SZL

[Vinitha Jeyakumar]

We have created a Ticket for you to follow-up on the reported issue. Please find the link below,

https://support.syncfusion.com/agent/tickets/383969

[Vinitha Jeyakumar]

Please ignore the previous update, You can get the follow up ticket link from the below one,

https://support.syncfusion.com/support/tickets/383969