CODEWITHSUNDEEP
javascriptblazorblazor-server-side
magmyr01
magmyr01

Reputation: 43

Using enter to navigate from one InputNumber to next one by tabindex in Blazor

I have an EditForm in Blazor Server with several InputNumber where each InputNumber is defined with a tabindex, id and @onkeydown event attached. What I'm trying to do is to be able to use enter instead of tab to switch cursor focus from one InputNumber to the next one, mostly using JavaScript.

I have a script that works just fine with <input> tags which I took from here and here

function invokeTabKey() {
    var currInput = document.activeElement;
    if (currInput.tagName.toLowerCase() == "input") {
        var inputs = Array.from(document.querySelectorAll("input[id^='txtinp_']"))
        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;
            }
        }
    }
}

And each InputNumber is defined as follows:

@{identifier = "txtinp_" + startIndex + CurrentWorkOrder.Rimps.FindIndex(a => a.Id == context.Item.Id) + TotalRimps * 4;}
<InputNumber TValue="double"
             Value="@context.Item.EndWidth"
             ValueChanged="@((e) => OnWidthChanged(e, "EndWidth", context.Item, true))"
             ValueExpression="() => context.Item.EndWidth"
             tabindex="@(startIndex + CurrentWorkOrder.Rimps.FindIndex(a => a.Id == context.Item.Id) + TotalRimps * 4)"
             id="@identifier"
             @onkeydown="@((a) => MoveFocus(a))"
             disabled="@(CurrentWorkOrder.Finished || Loading)"
             class="form-control"
             style="width:120px" />

They are defined like that because the InputNumbers are inside a table with several rows. The index is verified to work as using tab moves the cursor correctly.

All the elements I want to be navigable by pressing enter have an id that starts with txtinp_ and when debugging the script I can see that the script successfully finds another element with a higher tabindex, but next.focus() doesn't do anything. I have read that one possible reason for that is that InputNumber prevents the script from working properly but I haven't been able to fix it.

Any suggestions on what I can try to make this work?

Upvotes: 0

Views: 10

Answers (0)

Related Questions