How to Handle Enter Key Navigation for Tab index

BC Berly Christopher Syncfusion Team April 1, 2021 11:19 AM UTC

Hi Ismail,

Greetings from Syncfusion support.

We can achieve the requested requirement with help of calling the focus() method in the JS interop on keydown event handler. Kindly refer the below code example.

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit">

<DataAnnotationsValidator />

<SfTextBox ID="EmpID" @bind-Value="@employee.EmpID" @onkeydown="@keydown"></SfTextBox>

</div>

<SfTextBox ID="EmpName" @bind-Value="@employee.EmpName" @onkeydown="@keydown"></SfTextBox>

</div>

<SfTextBox ID="EmpAddress" @bind-Value="@employee.EmpAddress" @onkeydown="@keydown"></SfTextBox>

</div>

<SfComboBox TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" @onkeypress="@keydown">

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

</SfComboBox>

</div>

<SfComboBox TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" @onkeypress="@keydown">

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

</SfComboBox>

</div>

<button type="submit" class="btn btn-primary">Register</button>

</EditForm>

@code{

[Inject]

protected IJSRuntime JsRuntime { get; set; }

public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

{

if (args.Key == "Enter")

{

JsRuntime.InvokeVoidAsync("onFocus", "EmpID");

}

window.onFocus = (id) => {

var currInput = document.activeElement;

if (currInput.tagName.toLowerCase() == "input") {

var inputs = document.getElementsByTagName("input");

var currInput = document.activeElement;

for (var i = 0; i < inputs.length; i++) {

if (inputs[i] == currInput) {

var next = inputs[i + 1];

if (next && next.focus) {

next.focus();

}

break;

}

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Enter_Focus_164099-1285976318

Regards,

Berly B.C

KI KINS April 1, 2021 04:50 PM UTC

thanks for quick support

SN Sevvandhi Nagulan Syncfusion Team April 2, 2021 04:57 AM UTC

Hi Ismail,

We are glad to hear that the reported issue has been resolved. Please get back to us if you need further assistance.

Regards,

Sevvandhi N

KI KINS September 2, 2021 02:41 AM UTC

Sorry for late reply

I have two clarification

1.Can we handle model validation if I use enter key navigation (because default submit behavior is enter key)

2.Is it possible to write dynamic code for focusing input control whe I press enter key

First example

One code for autofocus for all control

No need to define field name like below code

BC Berly Christopher Syncfusion Team September 2, 2021 03:36 PM UTC

Hi Ahmed,

Query 1:

Can we handle model validation if I use enter key navigation (because default submit behavior is enter key)

Response:

Yes, by default form validation will be occurred if you are pressing enter key. So, there is no necessary to handle separately.

Query 2:

Is it possible to write dynamic code for focusing input control whe I press enter key

Response:

We have already shared the sample for focusing the control when pressing Enter key. If you want to done it through the separate component in server end, we suggest you to call the Focus() method as mentioned in the below code example.

<SfTextBox @ref="textobj" ID="EmpID" @bind-Value="@employee.EmpID" @onkeydown="@keydown"></SfTextBox>

public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

{

if (args.Key == "Enter")

{

this.textobj.FocusIn();

}

Query 3:

One code for autofocus for all control

Response:

No, we can render the only one focusable component on the page. If you focus on other element, previous element will be lost the focus. This is default behavior of HTML 5 elements.

Query 4:

No need to define field name like below code

Response:

We have not seen any reference code in the previous update. Can you please share it again?

Regards,

Berly B.C

KI KINS November 5, 2021 02:30 AM UTC

I have one more question in keyboard navigation.

The above code is working fine as per our requirement. ( static control)

I would like to know how to handle keyboard (enter key) navigation for generic object ( dynamic control ,it can be dynamic control from generic object)

BC Berly Christopher Syncfusion Team November 8, 2021 11:47 AM UTC

Hi Ahmed,

We need to create the reference for next focusable element and call the FocusIn() method to achieve the requested requirement since we could not focus the component until we get the next focusable element.

Regards,

Berly B.C

KI KINS November 10, 2021 12:05 PM UTC

I have below genereic source code.I need to know how to use tab index when i press enter key.

Note:-

I example how to call gereric field name (EmpId) in "JsRuntime.InvokeVoidAsync"

Example Source Code :-

public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

{

if (args.Key == "Enter")

{

JsRuntime.InvokeVoidAsync("onFocus", "EmpID");

}

Genereic Source Code :-

@if (genericPageFilters != null)

{

@foreach (var filterType in genericPageFilters)

{

var data = Enum.GetName(typeof(ControlName), Convert.ToInt32(@filterType.ControlType));

var Datasource = filterType.DataSource;

var placeHolder = filterType.WaterMark;

var isMandatory = filterType.IsMandatory;

var isDisabled = filterType.IsDisabled;

var Filterkey = filterType.FilterName;

var isVisible = filterType.IsVisible;

var maxLengthAttr = filterType.MaxLength;

bool disable = (isDisabled == 0 ? true : false);

var visible = "block";

if (isVisible == 0)

visible = "none";

var maxLength = commonHtmlAttribute.FifteenHtmlAttribute;

if (maxLengthAttr == "FiveHtmlAttribute")

maxLength = commonHtmlAttribute.FiveHtmlAttribute;

else if (maxLengthAttr == "TenHtmlAttribute")

maxLength = commonHtmlAttribute.TenHtmlAttribute;

else if (maxLengthAttr == "FifteenHtmlAttribute")

maxLength = commonHtmlAttribute.FifteenHtmlAttribute;

else if (maxLengthAttr == "TwentyHtmlAttribute")

maxLength = commonHtmlAttribute.TwentyHtmlAttribute;

else if (maxLengthAttr == "ThirtyHtmlAttribute")

maxLength = commonHtmlAttribute.ThirtyHtmlAttribute;

else if (maxLengthAttr == "FiftyHtmlAttribute")

maxLength = commonHtmlAttribute.FiftyHtmlAttribute;

else if (maxLengthAttr == "HunderedHtmlAttribute")

maxLength = commonHtmlAttribute.HunderedHtmlAttribute;

else if (maxLengthAttr == "TwoHundredMaxLengthAttribute")

maxLength = commonHtmlAttribute.TwoHundredMaxLengthAttribute;

@if (@data == "Dropdown")

{

var dataList = ddlDropdown[Datasource].OfType<GenericDropDownData>();

placeHolder = (placeHolder == "") ? "Select" : placeHolder;

<DropDownListEvents TValue="String" TItem="@GenericDropDownData" OnValueSelect="(a => OnDropdownChange(a, filterType.FilterName))"></DropDownListEvents>

</SfDropDownList>

</div>

}

@if (@data == "MultiSelectDropdown")

{

var dataList = ddlDropdown[Datasource].OfType<GenericDropDownData>();

placeHolder = (placeHolder == "") ? "Select" : placeHolder;

<SfMultiSelect TValue="int[]" TItem="@GenericDropDownData" @bind-Value="@selectedFactoryList"

Placeholder="@placeHolder" Mode="@VisualMode.Box" FloatLabelType="FloatLabelType.Always"

DataSource="@dataList" ShowSelectAll="false" EnableSelectionOrder="true"

ShowDropDownIcon="true" FilterBarPlaceholder="@placeHolder" PopupHeight="350px">

</SfMultiSelect>

</div>

}

@if (@data == "TextBox")

{

<SfTextBox Enabled="@disable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, placeHolder)" FloatLabelType="@FloatLabelType.Always"

Value="@values[filterType.FilterName]" HtmlAttributes="@maxLength"

@onchange="@(a => ValueChanged(a, filterType.FilterName))"></SfTextBox>

</div>

}

@if (@data == "NumericTextBox")

{

<SfNumericTextBox Placeholder="@GetResourceProvider.GetResourceValue(Resource, placeHolder)" Value="@values[filterType.FilterName]" HtmlAttributes="@maxLength" FloatLabelType="@FloatLabelType.Always"></SfNumericTextBox> @*HtmlAttributes="@commonHtmlAttribute.monthHtmlAttribute"*@

</div>

}

@if (@data == "CheckBox")

{

var isCheckedBox = @values[filterType.FilterName] == "True" ? true : false;

<SfCheckBox disabled="@disable" @bind-Checked="@isCheckedBox" Value="@values[filterType.FilterName]" @onchange="@(a => ValueChanged(a, filterType.FilterName))"></SfCheckBox>

</div>

}

@if (@data == "RadioButton")

{

var dataDropdown = OnLoadRadioSetAsync(Datasource);

var isRadioChecked = @values[filterType.FilterName] == "True" ? true : false;

@if (@radioLoad == null)

{

}

else

{

@foreach (var cnt in @radioGroup)

{

<SfRadioButton Label="@cnt.Name" Name="edition" @onchange="@(a => ValueChanged(a, filterType.FilterName))" @bind-Checked="@isRadioChecked"></SfRadioButton>

}

</div>

}

@if (@data == "Date")

{

var dateField = @values[filterType.FilterName] != "" ? DateTime.Parse(@values[filterType.FilterName]) : DateTime.Now;

<SfDatePicker Enabled="@disable" Value="@dateField" TValue="DateTime?" Placeholder='Choose a Date'

@onchange="@(a => ValueChanged(a, filterType.FilterName))"></SfDatePicker>

</div>

}

<SfMultiSelect TValue="int[]" TItem="FactorySetup" ID="MultiSelect" @bind-Value="@selectedFactoryList"

Placeholder="@GetResourceProvider.GetResourceValue(Resource, "lblFactoryList")" Mode="@VisualMode.Box" FloatLabelType="FloatLabelType.Always"

DataSource="@LoadfactoryList" ShowSelectAll="false" EnableSelectionOrder="true"

ShowDropDownIcon="true" FilterBarPlaceholder="@GetResourceProvider.GetResourceValue(Resource, "lblFactoryList")" PopupHeight="350px">

</SfMultiSelect>

</div>

<SfMultiSelect TValue="int[]" TItem="FactorySetup" AllowFiltering="true" Mode="@VisualMode.Box" @bind-Value="@selectedInActiveList"

Placeholder="@GetResourceProvider.GetResourceValue(Resource, "lblInActiveList")" FloatLabelType="FloatLabelType.Always"

DataSource="@LoadInActivefactoryList" ShowSelectAll="true" EnableSelectionOrder="true" ShowDropDownIcon="true" Enabled="@Enabled"

FilterBarPlaceholder="@GetResourceProvider.GetResourceValue(Resource, "lblInActiveList")" PopupHeight="350px">

</SfMultiSelect>

</div>

BC Berly Christopher Syncfusion Team November 11, 2021 04:43 PM UTC

Hi Ahmed,

We have already provided the support for specifying the TabIndex for the Syncfusion components using TabIndex property as mentioned below. So, you can use this property for the application requirement.

<SfTextBox ID="EmpID" TabIndex="1" @bind-Value="@employee.EmpID" @onkeydown="@keydown"></SfTextBox>

<SfComboBox TabIndex="2" TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" @onkeypress="@keydown">

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

</SfComboBox>

Also, we have shared the solution for focus the next element with help JS interop by accessing the input element in our first update. If we misunderstood your query, please share more details to proceed further from our end.

Regards,

Berly B.C

KI KINS November 19, 2021 06:55 AM UTC

As per below last reply

Last Reply :-

Query 1:

Can we handle model validation if I use enter key navigation (because default submit behavior is enter key)

Response:

Yes, by default form validation will be occurred if you are pressing enter key. So, there is no necessary to handle separately.

Current Question :-

I need to prevent default submit behavior when I press enter key on input control

I need to validate model validation when I click on submit button only not as enter key press on each input control

BC Berly Christopher Syncfusion Team November 22, 2021 06:56 AM UTC

Hi Ahmed,

Based on the validation of the reported scenario, we would like to inform you that if “Enter” key is pressed in the component inside the EditForm, the submit action will be triggered. This is default behavior of form. This behavior can be observed in the Blazor’s input component as well. For your reference, we have placed the Blazor input component in the EditForm to demonstrate the scenario. Kindly refer the below code,

<EditForm Model="@_testModel" OnValidSubmit="HandleSubmit">

<DataAnnotationsValidator />

<ValidationSummary />

<InputText id="name" @bind-Value="_testModel.Name" />

<button>Submit</button>

</EditForm>

@code {

private Test _testModel = new Test();

private void HandleSubmit()

{

}

Currently the Blazor platform does not natively support prevention of event bubbling and propagation. Hence, we need to use the JSInterop to bind event handler for keydown action. In the following code, we have prevented the default action by checking the Enter key action in the keydown event. Kindly refer the below code,

[Index.razor]

public void onCreated()

{

JsRuntime.InvokeVoidAsync("onKeyDown", "textbox", null);

}

[textbox.js]

function onKeyDown(id) {

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

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

args.stopImmediatePropagation();

}

})

}

Please find the sample below,

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EditForm_prevent-1012109037

Documentation for reference

Microsoft form validation link: https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1

Let us know if you need any further assistance on this.

Regards,

Berly B.C

KI KINS November 22, 2021 12:37 PM UTC

sorry still not working (submit behavior validation).please check modified code.

pls check screencast

https://www.screencast.com/t/OoB7iiFajJ

Attachment: BlazorApp1_caa50794.zip

BC Berly Christopher Syncfusion Team November 23, 2021 04:52 PM UTC

Hi Ahmed,

Thanks for sharing enough information to us. We have modified the sample for achieving the requested requirement and attached it below.

<EditForm Model="@_testModel" OnValidSubmit="HandleSubmit">

<DataAnnotationsValidator />

<SfTextBox ID="textbox" @bind-Value="_testModel.Value1" Created="@(() => onCreated("textbox"))"></SfTextBox>

<ValidationMessage For="() => _testModel.Value1" />

<SfTextBox ID="textbox1" @bind-Value="_testModel.Value2" Created="@(() => onCreated("textbox1"))"></SfTextBox>

<ValidationMessage For="() => _testModel.Value2" />

<SfTextBox ID="textbox2" @bind-Value="_testModel.Value3" Created="@(() => onCreated("textbox2"))"></SfTextBox>

<ValidationMessage For="() => _testModel.Value3" />

<SfTextBox ID="textbox3" @bind-Value="_testModel.Value4" Created="@(() => onCreated("textbox3"))"></SfTextBox>

<ValidationMessage For="() => _testModel.Value4" />

<SfTextBox ID="textbox4" @bind-Value="_testModel.Value5" Created="@(() => onCreated("textbox4"))"></SfTextBox>

<ValidationMessage For="() => _testModel.Value5" />

<button>Submit</button>

</EditForm>

@code {

public void onCreated(string Id)

{

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

}

function onKeyDown(id) {

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

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

args.preventDefault();

}

})

}

Please find the modified sample below.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EditForm-1687898406

Regards,

Berly B.C

KI KINS November 24, 2021 04:13 AM UTC

thanks for reply..

but enter key "tab index" not working which was already worked

public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

{

if (args.Key == "Enter")

{

JsRuntime.InvokeVoidAsync("onFocus", "ID");

}

BC Berly Christopher Syncfusion Team November 24, 2021 04:29 PM UTC

Hi Ahmed,

We will check and update the further details in two business days (26^th November 2021). We appreciate your patience until then.

Regards,

Berly B.C

KI KINS November 26, 2021 12:34 PM UTC

IS it possible to get reply ??

because tomorrow support team will not avaialable

BC Berly Christopher Syncfusion Team November 26, 2021 02:20 PM UTC

Hi Ahmed,

We have modified the sample based on the requested requirement and attached it below. Here, we have focus the next element on previous component’s enter key action. Kindly refer the below code example.

<EditForm Model="@_testModel" OnValidSubmit="HandleSubmit">

<DataAnnotationsValidator />

<SfTextBox ID="textbox" @bind-Value="_testModel.Value1" Created="@(() => onCreated("textbox"))" @onkeydown="@((args) => keydown(args,textbox1))"></SfTextBox>

<ValidationMessage For="() => _testModel.Value1" />

<SfTextBox @ref="textbox1" ID="textbox1" @bind-Value="_testModel.Value2" Created="@(() => onCreated("textbox1"))" @onkeydown="@((args) => keydown(args,textbox2))"></SfTextBox>

<ValidationMessage For="() => _testModel.Value2" />

<SfTextBox @ref="textbox2" ID="textbox2" @bind-Value="_testModel.Value3" Created="@(() => onCreated("textbox2"))" @onkeydown="@((args) => keydown(args,textbox3))"></SfTextBox>

<ValidationMessage For="() => _testModel.Value3" />

<SfTextBox @ref="textbox3" ID="textbox3" @bind-Value="_testModel.Value4" Created="@(() => onCreated("textbox3"))" @onkeydown="@((args) => keydown(args, textbox4))"></SfTextBox>

<ValidationMessage For="() => _testModel.Value4" />

<SfTextBox @ref="textbox4" ID="textbox4" @bind-Value="_testModel.Value5"Created="@(() => onCreated("textbox4"))" ></SfTextBox>

<ValidationMessage For="() => _testModel.Value5" />

<button>Submit</button>

</EditForm>

@code {

SfTextBox textbox1;

SfTextBox textbox2;

SfTextBox textbox3;

SfTextBox textbox4;

….

public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args, Syncfusion.Blazor.Inputs.SfTextBox reference)

{

if (args.Key == "Enter" && reference != null)

{

reference.FocusAsync();

}

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EditForm_Focus1098633100

Regards,

Berly B.C

KI KINS November 26, 2021 03:13 PM UTC

Thanks for support

I have below clarification

I have an below field in Editform

1.EmailId

2.PhoneNo

3.Website

How to prevent wrong input in above field??

That means,need to enter correct input value otherwise it should through warning message

BC Berly Christopher Syncfusion Team November 29, 2021 08:11 AM UTC

Hi KINS,

We can achieve the requested requirement with help of Phone, EmailAddress and Url data annotation attribute as mentioned below.

[Required]

[Phone]

public string Value1 { get; set; }

[Required]

[EmailAddress]

public string Value2 { get; set; }

[Required]

[Url]

public string Value3 { get; set; }

Please find the data annotation information from the below blog.

https://www.syncfusion.com/blogs/post/spice-up-your-blazor-editform-with-syncfusion-blazor-components.aspx

https://www.c-sharpcorner.com/article/validation-in-blazor-app/

For your reference, we have prepared the sample and attached it below.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EditForm_data_annotation-646038187

Regards,

Berly B.C

KI KINS November 30, 2021 02:53 AM UTC

Thanks for help.

I have below clarification

1.The above model validation is working fine When I submit editform but I would like to know how to prevent invalid input on email,phone and url before submitting editform that means while entering input.

2.How to auto focus first control in Editform (it may be textbox,combobox, date etc)

BC Berly Christopher Syncfusion Team November 30, 2021 11:29 AM UTC

Hi Ahmed,

Query 1:

1.The above model validation is working fine When I submit editform but I would like to know how to prevent invalid input on email,phone and url before submitting editform that means while entering input.

Response:

By default, the validation will be occurred on change event detection at the focus out action. So, we have provided support for validate the component on typing with help of “ValidateOnInput” property as true as mentioned in the below code example.

<SfTextBox ID="textbox" ValidateOnInput=true Placeholder="Enter Phone number" @bind-Value="_testModel.Value1" Created="@(() => onCreated("textbox"))" @onkeydown="@((args) => keydown(args,textbox1))"></SfTextBox>

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ValidateOnInput-84451990

Query 2:

2.How to auto focus first control in Editform (it may be textbox,combobox, date etc)

Response:

As we mentioned earlier, we need to call the FocusAsync() method for the first rendered component’s created event.

Regards,

Berly B.C

KI KINS December 1, 2021 12:50 PM UTC

Thanks

above code works fine but FocusAsync() not working for first control

I need to focus first control by default

BC Berly Christopher Syncfusion Team December 2, 2021 11:03 AM UTC

Hi Lazar Gosic,

Thanks for the patience.

We can call the FocusAsync method with some interval by define it in the new function as mentioned in the below code example.

API Link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html#Syncfusion_Blazor_Calendars_SfDatePicker_1_FocusAsync

public async Task UpdateFocus()

{

await textObj.FocusAsync();

}

protected override async Task OnAfterRenderAsync(bool firstRender)

{

base.OnAfterRenderAsync(firstRender);

if (firstRender)

{

await Task.Delay(500);

await UpdateFocus();

}

Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FocusAsync-789266295

Regards,

Berly B.C

KI KINS December 2, 2021 11:37 AM UTC

still not working

check below screencast

https://www.screencast.com/t/ViGullw47i

BC Berly Christopher Syncfusion Team December 3, 2021 01:30 PM UTC

Hi KINS,

We have checked the shared sample and the reported issue does not occurred at our end. So, we have taken video demonstration and attached it below.

Video Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/FocusAsync-18456283

Still issue persists, please increase the time of delay in the sample and confirm us whether the reported issue has been resolved or not.

Regards,

Berly B.C

KI KINS December 15, 2021 08:30 AM UTC

I have another below clarification on Enter Key for navigation.

1.As per above code, Enter Key navigation not working for sfdropdownlist

2.In below code,how can I get control id (for keydown event)

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit">

<DataAnnotationsValidator />

<SfTextBox ID="EmpID" @bind-Value="@employee.EmpID" @onkeydown="@keydown"></SfTextBox>

</div>

<SfTextBox ID="EmpName" @bind-Value="@employee.EmpName" @onkeydown="@keydown"></SfTextBox>

</div>

<SfTextBox ID="EmpAddress" @bind-Value="@employee.EmpAddress" @onkeydown="@keydown"></SfTextBox>

</div>

<SfComboBox TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" @onkeypress="@keydown">

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

</SfComboBox>

</div>

<SfComboBox TValue="string" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" @onkeypress="@keydown">

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

</SfComboBox>

</div>

<button type="submit" class="btn btn-primary">Register</button>

</EditForm>

@code{

[Inject]

protected IJSRuntime JsRuntime { get; set; }

public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args)

{

if (args.Key == "Enter")

{

JsRuntime.InvokeVoidAsync("onFocus", "EmpID");

}

BC Berly Christopher Syncfusion Team December 16, 2021 12:47 PM UTC

Hi KINS,

We can achieve the requested requirement with below code example.

<SfComboBox @ref="combobox1" TValue="string" ID="combobox1" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country" @onkeydown="@((args) => Combokeydown(args,combobox2))">

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

<ComboBoxEvents TValue=string TItem="Countries"></ComboBoxEvents>

</SfComboBox>

</div>

<SfComboBox TValue="string" @ref="combobox2" ID="combobox2" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">

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

<ComboBoxEvents TValue=string TItem="Countries"></ComboBoxEvents>

</SfComboBox>

</div>

public void Combokeydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args, Syncfusion.Blazor.DropDowns.SfComboBox<string, Countries> reference)

{

if (args.Key == "Enter" && reference != null)

{

reference.FocusAsync();

//JsRuntime.InvokeVoidAsync("onFocus", "ID");

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Focus_ComboBox725819874

Regards,

Berly B.C

KI KINS December 16, 2021 03:21 PM UTC

Thanks for reply

For combokeydown,how can I define dynamic TItem.

That means I would like to use this combokeydown event for all combobox

KI KINS December 17, 2021 09:50 AM UTC

Please help

BC Berly Christopher Syncfusion Team December 17, 2021 03:33 PM UTC

Hi KINS,

We would like to inform you that, we could not assign the TValue or TItem dynamically for the Blazor components. If you want to render the Blazor components with different TValue and TItem, we can use the typeparam concept in the Blazor platform as mentioned in the below documentation.

UG Link: https://blazor-university.com/templating-components-with-renderfragements/using-typeparam-to-create-generic-components/

So, we suggest you to use separate keydown event handler if you are using different TValue and TItem for the combobox component.

Regards,

Berly B.C

KI KINS December 25, 2021 07:00 AM UTC

thanks for support and sorry for late reply..

As per first example code from below link, I have another clarification.

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Enter_Focus_164099-1285976318

1."OnValidSubmit" should raise only when I press Enter key on last control (but currently it check for "required validation" when I press enter key on all control because of default submit behavior is "Enter key")

2.I can not get last column value when I press enter key on last control (I need to get all field value from model when I press enter key on last column)

BC Berly Christopher Syncfusion Team December 27, 2021 01:56 PM UTC

Hi KINS,

Query 1:

1."OnValidSubmit" should raise only when I press Enter key on last control (but currently it check for "required validation" when I press enter key on all control because of default submit behavior is "Enter key")

Response:

We would like to inform you that, once all required field inside the form will be entered then the OnValidSubmit event will be fired on enter key pressing action.

Query 2:

2.I can not get last column value when I press enter key on last control (I need to get all field value from model when I press enter key on last column)

Response:

We can get the form field value on submit action from the model or EditContext instance as mentioned below.

public async Task HandleValidSubmit(EditContext editContext)

{

}

Regards,

Berly B.C

KI KINS December 27, 2021 02:57 PM UTC

Thanks for reply...

Noted the above concerns

Can I handle above validation when I click normal button instead of submit button??

BC Berly Christopher Syncfusion Team December 28, 2021 08:56 AM UTC

Hi KINS,

We can trigger the validation manually for the components with help of Validate() method as mentioned in the below blog.

https://www.syncfusion.com/faq/blazor/forms-and-validation/how-do-you-manually-trigger-the-form-validation-in-blazor

Regards,

Berly B.C

KI KINS replied to Berly Christopher December 28, 2021 10:15 AM UTC

Thanks for reply..

Actually my exact requirement is

I need to handle "Tab index" navigation (auto focus to next control) using enter key inside "EditForm".

but when I press "enter key " ,then I am getting validation message from model class

I need to handle validation only on button click not "as Enter Key".

Please advise how to do this.

BC Berly Christopher Syncfusion Team December 29, 2021 02:02 PM UTC

Hi KINS,

As we mentioned earlier in the thread, we can prevent the enter key validation with help of preventDefault() method in the keydown event handler. Also, we can focus the next control with help of calling FocusAsync() method in the keydown event handler. Also, We can perorm form validation in the external button click action, with help of Validate() method.

public void keydown(Microsoft.AspNetCore.Components.Web.KeyboardEventArgs args, Syncfusion.Blazor.Inputs.SfTextBox reference)

{

if (args.Key == "Enter" && reference != null)

{

reference.FocusAsync(); // focus the next component on enter key action.

}

public async Task BtnClick()

{

EC.Validate(); // Validate the component in external button click

}

function onKeyDown(id) {

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

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

args.preventDefault(); // prevent the enter key validation

}

})

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Form_Validation-924546755

Regards,

Berly B.C

KI KINS January 4, 2022 07:14 AM UTC

As per above comments.I need to get last column value from model or editcontext when I click button during validation

Query 2:

2.I can not get last column value when I press enter key on last control (I need to get all field value from model when I press enter key on last column)

Response:

We can get the form field value on submit action from the
model
or
EditContext
instance
as mentioned below.

public async Task HandleValidSubmit(EditContext editContext)

{

}

My requirment :-

I need to get model value here if validation is success

public async Task BtnClick()

{

EC.Validate(); // Validate the component in external button click

}

Note:-

Please add sfnumericbox as last control.

PM Ponmani Murugaiyan Syncfusion Team January 5, 2022 03:16 PM UTC

Hi KINS,

Query:

I need to get model value here if validation is success

Response:

If we are validating the form element with Validate() method, then OnValidSubmit and OnInValidSubmit event will not be triggered. So, we can get the model value from the EditContext instance and we need to check whether all form fields are entered or not from that instance as mentioned below.

Query 2:

Please add sfnumericbox as last control.

Response:

We have added the Numeric TextBox component as a last component and attached the sample below.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/EditForm_validate_modified1048550970

Regards,

Ponmani M.

KI KINS January 6, 2022 09:00 AM UTC

thanks...

PM Ponmani Murugaiyan Syncfusion Team January 7, 2022 05:38 AM UTC

Thanks for the update, please get back us if you need further assistance.

KI KINS January 11, 2022 02:51 AM UTC

There is final clarification in this discussion.As per continue discussion almost my problem is resolved.

As per below code, focus method is working fine on initial render.I would like to know how to focus on first control when button is clicked.

Note:-

Focus method in button click is working sometimes and not not working sometimes

Please advise what is exact procedure to handle this..

public async Task UpdateFocus()

{

await textObj.FocusAsync();

}

protected override async Task OnAfterRenderAsync(bool firstRender)

{

base.OnAfterRenderAsync(firstRender);

if (firstRender)

{

await Task.Delay(500);

await UpdateFocus();

}

PM Ponmani Murugaiyan Syncfusion Team January 11, 2022 01:05 PM UTC

Hi KINS

We have prepared sample as per your reported requirement and it is working as expected in our end. Please find the sample below for reference.

<SfTextBox @ref="TextBoxObj" ID="TextBox1" Value="@Name"></SfTextBox>

<SfTextBox ID="TextBox1" Value="@Name"></SfTextBox>

<button @onclick="@UpdateFocus">Update Focus to first control</button>

@code {

SfTextBox TextBoxObj;

public string Name { get; set; } = "Hello, World!";

public async Task UpdateFocus()

{

await TextBoxObj.FocusAsync();

}

protected override async Task OnAfterRenderAsync(bool firstRender)

{

base.OnAfterRenderAsync(firstRender);

if (firstRender)

{

await Task.Delay(500);

await UpdateFocus();

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox_Focus-360854938

Kindly check with the above sample, if issue still exists in your end, please share the issue reproducing sample which helps us to check and provide you the solution at earliest.

Regards,

Ponmani M

KI KINS January 11, 2022 02:15 PM UTC

please check my comments in below screencast

https://www.screencast.com/t/IalP9vBs

KI KINS January 12, 2022 04:05 PM UTC

Please help....

PM Ponmani Murugaiyan Syncfusion Team January 12, 2022 04:30 PM UTC

Hi KINS,

Thanks for sharing the video demonstration. But unfortunately we were unable to replicate the reported issue in our end. If you are using lowest version of Syncfusion Nuget please upgrade to latest version and ensure in your end. Also please share the below details to proceed further.

Share Syncfusion Nuget version used in your application.
Whether you are using Blazor Server Side or WebAssembly and .NET core version 3.5 or 5.0 in your application.
If possible share issue reproducing sample or to replicate in the previously attached sample or share code snippet.

Regards,

Ponmani M

KI KINS January 12, 2022 04:33 PM UTC

Please check my below details

1.Syncfusion version:19.4

2.Web Assembly

3.Visual Studio 2019 with 5.0 .net framework.

KI KINS January 13, 2022 04:57 AM UTC

Forgot to attach my code.

please check my code and help how to resolve this issue.

public async Task UpdateFocus()

{

await txt1.FocusAsync();

testing = new TestingClass();

}

Note:-

testing = new TestingClass();

I have call the above code to clear all bind value.

Attachment: TextBox_Focus360854938_5f9aad72.zip

PM Ponmani Murugaiyan Syncfusion Team January 13, 2022 08:15 AM UTC

Hi KINS,

Thanks for sharing the issue reproducing sample. We able to reproduce the reported issue in our end. The cause for the issue is “the code to clear the bind value” removed the focus of the component. So, we suggest to swap the code before updating the focus method, clear the bind value and call the focus method with time delay to get rid of the issue.

public async Task UpdateFocus()

{

// I have call the below code to clear all bind value.

testing = new TestingClass();

await Task.Delay(100);

await txt1.FocusAsync();

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/TextBox_Focus671206336

Regards,

Ponmani M

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Enterprise Solutions

Free Products

Viewer Component

.NET PDF Processing Library

Conversions

Editor Component

.NET Word Processing Library

Conversions

Editor Component

.NET Excel Processing Library

Conversions

.NET PowerPoint Processing Library

Conversions

Learning

Resources

Support

How to Handle Enter Key Navigation for Tab index