This is a migrated thread and some comments may be shown as answers.

Focus Rectangle for TextBox broken in Bootstrap

1 Answer 185 Views
TextBox
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Veteran
Michael asked on 25 May 2020, 04:32 AM

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

 

 

 

1 Answer, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
Veteran
answered on 27 May 2020, 06:32 AM

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

It has now been submitted: 

TextBox Bug Report

Tags
TextBox
Asked by
Michael
Top achievements
Rank 1
Veteran
Answers by
Michael
Top achievements
Rank 1
Veteran
Share this question
or