Focus to next control is slow when pressing enter key

[KINS]

I have write a below code,to focus next control when I press enter key.This works fine when input control is less (1 to 4 control).If I use more than 15 control then the focus to next control is slow( slow focus becuase of "for loop" in js code).

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

    <DataAnnotationsValidator /> 

    <div class="form-group"> 

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

    </div> 

    <div class="form-group"> 

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

    </div> 

    <div class="form-group"> 

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

    </div> 

    <div class="form-group"> 

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

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

        </SfComboBox> 

    </div> 

    <div class="form-group"> 

        <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; 

            } 

        } 

    } 

}  

 

[KINS]

I have another issue for focusing next control.

if next control is in "disable mode/Readonly mode", then focus for next control is not working.

[Sureshkumar P]

Hi KINS, 

 

Query 1: If I use more than 15 control then the focus to next control is slow( slow focus becuase of "for loop" in js code). 

              We have validated the reported scenario with the 20 and above components but we cannot replicate the reported slow issue.  please share the exact count of components in your form to replicate the reported issue in our end. 

 

Query 2: if next control is in "disable mode/Readonly mode", then focus for next control is not working.  

              Please find the modified ciode example to achieve your requirement in the disabled and readonly modes.  

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++) { 

            var disabled = inputs[i + 1].hasAttribute("disabled"); 

            var readOnly = inputs[i + 1].hasAttribute("readonly"); 

            if (inputs[i] == currInput) { 

                i = (disabled || readOnly) ? (i + 1) : i; 

                var next = inputs[i + 1]; 

                if (next && next.focus) { 

                    next.focus(); 

                } 

                break; 

            } 

        } 

    } 

} 

 

 

Find the modified sample here: https://www.syncfusion.com/downloads/support/forum/171913/ze/Textbox1304841210  

 

Regards, 

Sureshkumar P 

[KINS]

Thanks for support...

Actually I have two blazor component in my page

First Component contain 15 input controls which is read only 

Second Component is 10 control which is user input control 

Is it possible to start enter key navigation for second component input control ??

[KINS]

I have another two issue.

1.If more than two control is in disabled mode, then focus is not working. Please check attached sample project

2.For some page, focus jump to next control instead of sequence order. Please check below screencast and sample razor file

screeencast:-

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

Razor Page:-

<div class="editForm">

                    <EditForm Model="@styleSetup" Id=@pageID>

                        <CustomValidation @ref="@customValidation" />

                        <div class="row">

                            @if (productFieldMappingSetups.Count() > 0)

                            {

                                var result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "StyleNo");

                                var mandatoryIndicator = "";

                                var enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfTextBox Placeholder="@GetResourceProvider.GetResourceValue(Resource, "StyleNo")" CssClass="@mandatoryIndicator"

                                                   @bind-Value="styleSetup.StyleNo" FloatLabelType="@FloatLabelType.Always" Readonly="true" Enabled="enb" @onkeydown="keydown"></SfTextBox>

                                        <ValidationMessage For="@(() => styleSetup.StyleNo)" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "LiningTypeId");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfComboBox ID="ddlLiningType" @ref="cmbtype" DataSource="@referenceLiningType" @bind-Value="@styleSetup.LiningTypeId" CssClass="@mandatoryIndicator" Enabled="enb" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" ShowClearButton="true" AllowFiltering="true" PopupHeight="200px" PopupWidth="100%"

                                                    Placeholder="@GetResourceProvider.GetResourceValue(Resource, "LiningTypeId")" FloatLabelType="@FloatLabelType.Always" @onkeypress="keydown">

                                            <ComboBoxFieldSettings Value="ReferenceDetailsID" Text="ReferenceDetailsName"></ComboBoxFieldSettings>

                                            <ComboBoxEvents TItem="SReferenceDetailsSetup" TValue="int?"></ComboBoxEvents>

                                        </SfComboBox>

                                        <ValidationMessage For="@(() => styleSetup.LiningTypeId)" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "LiningMaterialTypeId");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfComboBox ID="ddliningMaterialType" DataSource="@liningMaterialTypes" @bind-Value="@styleSetup.LiningMaterialTypeId" CssClass="@mandatoryIndicator" Enabled="enb" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" ShowClearButton="true" AllowFiltering="true" PopupHeight="200px" PopupWidth="100%"

                                                    Placeholder="@GetResourceProvider.GetResourceValue(Resource, "LiningMaterialTypeId")" FloatLabelType="@FloatLabelType.Always" @onkeypress="keydown">

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

                                        </SfComboBox>

                                        <ValidationMessage For="@(() => styleSetup.LiningMaterialTypeId)" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "GenderID");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfComboBox ID="ddlGender" DataSource="@gender" @bind-Value="@styleSetup.GenderID" CssClass="@mandatoryIndicator" Enabled="enb" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" ShowClearButton="true" AllowFiltering="true" PopupHeight="200px" PopupWidth="100%"

                                                    Placeholder="@GetResourceProvider.GetResourceValue(Resource, "GenderID")" FloatLabelType="@FloatLabelType.Always" @onkeypress="keydown">

                                            <ComboBoxFieldSettings Value="ReferenceDetailsID" Text="ReferenceDetailsName"></ComboBoxFieldSettings>

                                            <ComboBoxEvents TItem="SReferenceDetailsSetup" TValue="int"></ComboBoxEvents>

                                        </SfComboBox>

                                        <ValidationMessage For="@(() => styleSetup.GenderID)" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "LiningSizeId");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfComboBox ID="ddlLiningSize" DataSource="@liningSizes" @bind-Value="@styleSetup.LiningSizeId" CssClass="@mandatoryIndicator" Enabled="enb" FilterType="Syncfusion.Blazor.DropDowns.FilterType.Contains" ShowClearButton="true" AllowFiltering="true" PopupHeight="200px" PopupWidth="100%"

                                                    Placeholder="@GetResourceProvider.GetResourceValue(Resource, "LiningSizeId")" FloatLabelType="@FloatLabelType.Always" @onkeypress="keydown">

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

                                        </SfComboBox>

                                        <ValidationMessage For="@(() => styleSetup.LiningSizeId)" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "LiningDie");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required properconversion";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfTextBox Placeholder="@GetResourceProvider.GetResourceValue(Resource, "LiningDie")" Enabled="enb"

                                                   @bind-Value="styleSetup.LiningDie" FloatLabelType="@FloatLabelType.Always" HtmlAttributes="@commonHtmlAttribute.FiftyHtmlAttribute" CssClass="@mandatoryIndicator" @onkeydown="keydown"></SfTextBox>

                                        <ValidationMessage For="@(() => styleSetup.LiningDie)" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "LiningPiece");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required properconversion";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfTextBox Placeholder="@GetResourceProvider.GetResourceValue(Resource, "LiningPiece")" Enabled="enb"

                                                   @bind-Value="styleSetup.LiningPiece" FloatLabelType="@FloatLabelType.Always" HtmlAttributes="@commonHtmlAttribute.FiftyHtmlAttribute" CssClass="@mandatoryIndicator" @onkeydown="keydown"></SfTextBox>

                                        <ValidationMessage For="@(() => styleSetup.LiningPiece)" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "LiningVentLength");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfNumericTextBox TValue="decimal?" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "LiningVentLength")" Enabled="enb" ShowSpinButton="false"

                                                          @bind-Value="styleSetup.LiningVentLength" FloatLabelType="@FloatLabelType.Always" CssClass="@mandatoryIndicator" @onkeydown="keydown">

                                            <NumericTextBoxEvents TValue="decimal?" ></NumericTextBoxEvents>

                                        </SfNumericTextBox>

                                        <ValidationMessage For="@(() => styleSetup.LiningVentLength)" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "LiningDesign");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfCheckBox Label="@GetResourceProvider.GetResourceValue(Resource, "LiningDesign")" Enabled="enb" CssClass="@mandatoryIndicator" @bind-Checked="@styleSetup.LiningDesign" @onkeydown="keydown" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "LiningSlippon");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfCheckBox Label="@GetResourceProvider.GetResourceValue(Resource, "LiningSlippon")" Enabled="enb" CssClass="@mandatoryIndicator" @bind-Checked="@styleSetup.LiningSlippon" @onkeydown="keydown" />

                                    </div>

                                }

                                result = @CommonClassHelper.GetProductMappingValue(productFieldMappingSetups, "LiningVent");

                                enb = true;

                                if (result != null)

                                {

                                    enb = result.Enable;

                                    if (result.Mandatory)

                                        mandatoryIndicator = "required";

                                    else

                                        mandatoryIndicator = "";

                                }

                                if (result == null || result.Visible)

                                {

                                    <div class="col-sm-12 col-md-6 col-lg-3">

                                        <SfCheckBox Label="@GetResourceProvider.GetResourceValue(Resource, "LiningVent")" Enabled="enb" CssClass="@mandatoryIndicator" @bind-Checked="@styleSetup.LiningVent" @onkeydown="keydown" />

                                    </div>

                                }

                            }

                        </div>

                        @if (!string.IsNullOrEmpty(message))

                        {

                            <div class="alert alert-danger mt-3 mb-0">@message</div>

                        }

                    </EditForm>

                    <StyleStockList authenticationService="@authenticationService" navigationManager="@navigationManager" Resource="@Resource" rights="@rights" commonService="@commonService" moduleID="@moduleID" processID="@processID" functionID="@functionID" pageID="@pageID" styleService="@styleService" styleSetup="@styleSetup" StyleStockCallBack="UpdateStyleStock" />

                </div>

Attachment: NewTextbox1304841210_ac418268.rar

[Vinitha Jeyakumar]

Hi Kins,

We have prepared a sample as per your requirement to start the enter key navigation from the second component. please check the code below,

Code snippet:

AddFocus.js

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++) {

            var disabled = inputs[i + 1].hasAttribute("disabled");

            var readOnly = inputs[i + 1].hasAttribute("readonly");

            if (inputs[i] == currInput) {

                i = (disabled || readOnly) ? (i + 1) : i;

                var next = inputs[i + 1];

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

                    if (next.hasAttribute("readonly") || next.hasAttribute("disabled")) {

                        next = inputs[j + 1];

                    }

                    else {

                        next.focus();

                    }

                }

               

                break;

            }

        }

    }

}

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

Regards,

Vinitha

[KINS]

Thanks for reply..

Did you check my last queries which I post today???

[Vinitha Jeyakumar]

Hi Kins,

​Yes, we have checked the queries reported and tried to reproduce the issue with the attached sample. but unfortunately, we didn't face any issues. 

We suspect that the reported issues will be resolved with the solution we suggested in last update.

If still issue persists, at your end. please share us with the runnable issue reproducing sample to validate on the issue.

Regards,

Vinitha