My users use Tab to focus the masked textbox and when they start typing (its content was highlighted because of getting focus with Tab), that typing action does not put the range (caret) in the correct place - it remains at position 0 rather than going to position 1.
For example, in the below phone mask they type "9" and then "0" and I would expect to get "90" but I get "0".
---
ADMIN EDIT
A workaround is to collapse the range when the input gets focus:
@inject IJSRuntime JsInterop
<input />
<span @onfocusin="@CollapseInputSelection" @ref="@ParentElem">
<TelerikMaskedTextBox Mask="+1 (000) 000-0000"
IncludeLiterals="true"
@bind-Value="@CellPhoneNumber"
Class="form-control" />
</span>
@* move this script to an actual script file instead of using this hack *@
<script suppress-error="BL9992">
function collapseInputSelection(root) {
setTimeout(function () {
var input = root.querySelector("input");
if (input) {
input.setSelectionRange(0, 0);
}
}, 20);
}
</script>
@code{
string CellPhoneNumber { get; set; }
ElementReference ParentElem { get; set; }
async Task CollapseInputSelection()
{
await JsInterop.InvokeVoidAsync("collapseInputSelection", ParentElem);
}
}
---
When the user enters a value, clicks out of the Masked Textbox and then back into it, the cursor is placed at the beginning of the input rather than at the end of the value.
This issue only happens when:
Reproduction: https://blazorrepl.telerik.com/meEpmEbR20id24Ss02.