Focus Rectangle for TextBox broken in Bootstrap

[Michael]

Starting with version 2.13 the focus rectangle is no longer resetting after the control loses focus. (See attached image)

I'm using the Telerik Bootstrap CSS style sheet:

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />

 

This reproduces the problem:  It works with version 2.12 and before.

@page "/TextEditFocusPage"

<h3>Edit To Do Item</h3>

<EditForm Model="ToDoItem" OnInvalidSubmit="OnValidSubmit">
    <DataAnnotationsValidator />

    <div class="form">
        <div class="form-group row">
            <label for="activity" class="col-3 col-form-label">Activity</label>
            <div class="col-9">

                <TelerikTextBox Id="activity"
                                Class="form-control"
                                @bind-Value="@ToDoItem.Activity" />
            </div>
        </div>

        <div class="form-group row">
            <label for="description" class="col-3 col-form-label">Description</label>
            <div class="col-9">

                <TelerikTextBox Id="description"
                                Class="form-control"
                                @bind-Value="@ToDoItem.Description" />
            </div>

        </div>

        <div class="form-group row">
            <label for="status" class="col-3 col-form-label">Status</label>
            <div class="col-9">
                <TelerikDropDownList Id="status"
                                     Data="@StatusTypes"
                                     TextField="Description"
                                     ValueField="StatusId"
                                     @bind-Value="ToDoItem.Status" />
            </div>
        </div>

        <div class="form-group row">
            <label for="notes" class="col-3 col-form-label">Notes</label>
            <div class="col-9">
                <InputTextArea Id="notes"
                               class="k-textarea"
                               style="width: 100%;"
                               @bind-Value="@ToDoItem.Notes" />
            </div>
        </div>

        <div class="form-group row">
            <label for="duedate" class="col-3 col-form-label">Due</label>
            <div class="col-9">
                <TelerikDatePicker Id="duedate"
                                   @bind-Value="@ToDoItem.DueDate"
                                   PopupHeight="Auto"
                                   PopupWidth="Auto"
                                   Width="100%" />
            </div>
        </div>
    </div>
</EditForm>

@code {
    public ToDo ToDoItem { get; set; } = new ToDo();
    public List<StatusType> StatusTypes { get; set; }

    protected override void OnInitialized()
    {
        StatusTypes = GetStatusTypes();

        ToDoItem.Status = 2;
        ToDoItem.Activity = "Pick Up Food";
        ToDoItem.Description = "Order will be ready at 5:00pm";
        ToDoItem.DueDate = DateTime.Today;

        base.OnInitialized();
    }

    private void OnValidSubmit()
    {

    }

    List<StatusType> GetStatusTypes()
    {
        return new List<StatusType>()
{
            new StatusType(){StatusId=1, Description="Urgent"},
            new StatusType(){StatusId=2, Description="Normal"},
            new StatusType(){StatusId=3, Description="Low"}
        };
    }

    public class ToDo
    {
        public string Activity { get; set; }
        public string Description { get; set; }
        public int Status { get; set; }
        public string Notes { get; set; }
        public DateTime DueDate { get; set; }

    }

    public class StatusType
    {
        public int StatusId { get; set; }
        public string Description { get; set; }
    }

}

 

 

 

[Michael]

After posting this to the forum I realized it should be submitted as a bug report.

It has now been submitted: 

TextBox Bug Report