Enter key should work like a tab

[Sri Aluka]

Hi,

enter key in sfdropdown should work like a tab key (that move to next control on the page).

How can we achieve that. currently enter key open the popup list.

[Buvana Sathasivam]

Hi Sri,

We have created a sample as per your requirement to prevent the opening of the popup on enter key press in SfDropDownList control using the Created and OnOpen events along with jsInterop functionality. Please check the code and sample below.

Index.razor

<SfDropDownList…..>

  <DropDownListEvents TValue="string" TItem="Games" Created="@(() => onCreated("Dropdown"))" OnOpen="@OnOpen"></DropDownListEvents>

</SfDropDownList>

<SfTextBox @ref="textbox1" ID="textbox1"></SfTextBox>

@code {

    SfTextBox textbox1;

    private static bool flag = false;

    [Inject]

    protected IJSRuntime JsRuntime { get; set; }

 

    public void onCreated(string Id)

    {

        JsRuntime.InvokeVoidAsync("CStoJSCall", Id, null);

    }

    public void OnOpen(BeforeOpenEventArgs args)

    {

        if (flag)

        {

            args.Cancel = true;

            textbox1.FocusAsync();

        }

        flag = false;

    }

     // Return call back from JavaScript to C#

    [JSInvokable]

    public static void JStoCSCall()

    {

        flag = true;

    }

}

_Host.cshtml

    <script>

        function CStoJSCall(id) {

    document.getElementById(id).parentElement.addEventListener('keydown', function (args) {

        if (args.key === 'Enter') {

            DotNet.invokeMethodAsync('BlazorApp2', 'JStoCSCall');         

        }

    })

}

        </script>

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_Created

Regards,

Buvana S

Attachment: BlazorApp2_7026affb.zip