We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Enter key should work like a tab

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.




1 Reply

BS Buvana Sathasivam Syncfusion Team May 19, 2023 12:17 PM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon