Consider a scenario with two Windows. The first one is centered. Users open a second Window from the first one, and the second Window gains focus.

At this point, if the user clicks on the titlebar of the first Window, it will lose its centered position and move to the corner of the screen.

Here is a REPL test page: https://blazorrepl.telerik.com/wSOMEtEL55Ddk4v441

A possible workaround is to set explicit Width, Height, Top and Left values to the first Window, so that it's not centered, but appears to be: https://blazorrepl.telerik.com/QeaWuNus07TfnCz731

I am using ComboBox and I want to be able to filter by two model properties. To achieve this I have implemented custom filtering through the OnRead event. Additionally, I am ordering the data to first match the results from the one property, which also is used for the TextField, and after that to match the results from the other property. However, when the results are only from the match of the second property, there is no focus.

Here is a REPL example https://blazorrepl.telerik.com/wyaMQhEN108axXJ036 

Steps to reproduce the issue:

Type "a": "Value test - ano" has the focus (the first option in the list)

Type "an": "Value test - ano" receives the focus (the first option in the list)

Type "ano": "Value test - ano" receives the focus (the first option in the list)

Type "anot": no item has focus despite the results being only "Another Value - val"

We have the following scenario:

• a dialog that contains a TreeView
• the TreeView is not expanded, when the dialog is opened, only the root node is displayed
• the children are loaded on demand, when the parent node is expanded
• there is a public async Task LoadChildrenAsync() that loads the children from the source
• the loading operation might take a few seconds

The problem is when you close the dialog before the loading is finished, a NullReferenceException occurs.

System.NullReferenceException: Object reference not set to an instance of an object.
   at Telerik.Blazor.Components.Common.Trees.TelerikTreeDataSource.GetTreeItems(IEnumerable`1 data, Int32 level, String parentIndex)

I am using Grid with Cell Selection enabled and DragToSelect="true". If I define a Template inside the GridColumn tag and I add a div inside that, SelectedCellsChanged event handler does not trigger if I start dragging by clicking on the div or if I drop inside that one.

Reproduction: https://blazorrepl.telerik.com/myasmnvQ46Jt7k5n50.

===

ADMIN EDIT

===

The only workaround for the time being is to disable the drag selection and let the user only select cells by clicking them. The cells will be selected even if the user clicks on the custom <div> element inside the template.

Pressing Shift+Tab initially when the Window is opened, moves the focus from the Window back to the Button that opens it.

Steps To Reproduce:

1. Open REPL repro
2. Click "Open Modal" Button
3. Press "Shift+Tab"

The bug is reproducible only when the TimePicker is bound to a nullable type (be that DateTime or TimeOnly). In this case, selecting time from the popup includes seconds in the value - the seconds from the time of selection. When typing in the input, seconds are always 00.

The issue is that the user is not aware of the seconds' value and cannot change it. This may lead to a variety of problems - e.g. filtering by time in Grid: https://blazorrepl.telerik.com/cebaGNlH53mOoiaA12.

When the Tooltip TargetSelector is button[title] and you change the Calendar's view mode, the Tooltip text remains the initial one. Steps to reproduce:

https://blazorrepl.telerik.com/cIvORFuC16Zgi9yP55

1. Hover over the view navigation button. The Tooltip text is Choose a month, which is correct.
2. Change the view.

Now the navigation button text is 2024 and the Tooltip should display Choose an year, but instead, it displays Choose a month. If you change the view again the button text is 2020-2029 and the Tooltip text remains Choose a month, when it should display Choose a decade.

===ADMIN EDIT===

In the meantime, the workaround is to keep using one Tooltip for the whole application and have another one that targets only the navigation button in the Calendar. Here is an example: https://blazorrepl.telerik.com/GobanlEC46JfsnNk08 

I am using a CheckBoxList filter menu and I am setting an initial filter through the OnStateInit. I noticed that when the Grid initializes and I check all the boxes, the Grid does not show any records. For reference, if no initial filter is applied and all CheckBoxes are selected, the Grid shows all the records.

Reproduction: https://blazorrepl.telerik.com/GSbbbJut14K03I2x14.

===

ADMIN EDIT

===

As a workaround for the time being, you may create a custom Filter Menu.

The issue targets a Grid with cell selection and DragToSelect feature disabled where at least one column has Visible="false". With this configuration, when using Shift + Click to select multiple cells, the result is a mismatch in the cells that should be selected, after the position where the invisible column is placed.

Video reproduction attached. Reproduction code: https://blazorrepl.telerik.com/GyFuQwPf37H8riAM19.

There seems to be no System.Type that will allow a GridColumn to be specified with the 'FieldType' attribute to receive a TelerikTimePicker

typeof(DateTime) --> TelerikDateTimePicker

typeof(?) --> TelerikTimePicker

<TelerikGrid Data="@gridDataExpando" Width="100%" Sortable="false" Pageable="false" Resizable="true" ShowColumnMenu="false"
             ScrollMode="@GridScrollMode.Scrollable"
             Height="100%"
             EditMode="@GridEditMode.Incell"
             OnUpdate="@UpdateHandlerExpando"
             OnEdit="@EditHandler">
   <GridColumns>
      @{
         var firstItem = gridDataExpando.FirstOrDefault();
         if (firstItem != null)
         {
            var dictionaryItem = firstItem as IDictionary<string, object>;
            foreach (var item in dictionaryItem)
            {
               if (!item.Key.Contains("Id"))
               {
                  <GridColumn Field="@(item.Key)" FieldType="@(this.GetDataType(item.Key))" Width="140px" DisplayFormat="{0:hh:mm:ss tt}">
                     <HeaderTemplate>
                        <span>@item.Key</span>
                    </HeaderTemplate>
                   </GridColumn>
               }
            }
         }
      }
   </GridColumns>
</TelerikGrid>

It would be nice to be able to configure a show/hide animation for windows.

ADMIN EDIT: This might include a form of a Shown event so that you could know when the content is rendered and available to, for example, focus a button or input. For more details see here

Docking Control like WPF Docking Control: https://www.telerik.com/products/wpf/docking.aspx

The TileLayout should not render tabindex="0" on its tiles when Navigable="false".

Here is a test page with a workaround:

@inject IJSRuntime js

<p>Tab through the textboxes:</p>

<input />

<TelerikTileLayout Columns="2"
                   RowHeight="200px"
                   Resizable="false"
                   Reorderable="false"
                   Navigable="false"
                   Class="tilelayout-tabindex-remove">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>
                <p>TileLayout Navigable="false" - will focus the inner textbox and will not focus the tiles.</p>
                <input />
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>Tile 2 content.</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<input />

<TelerikTileLayout Columns="2"
                   RowHeight="200px"
                   Resizable="false"
                   Reorderable="false"
                   Navigable="true">
    <TileLayoutItems>
        <TileLayoutItem HeaderText="Tile 1">
            <Content>
                <p>TileLayout Navigable="true" - will not focus the inner textbox and will focus the tiles. Focus the textbox with Enter when on the tile.</p>
                <input />
            </Content>
        </TileLayoutItem>
        <TileLayoutItem HeaderText="Tile 2">
            <Content>Tile 2 content.</Content>
        </TileLayoutItem>
    </TileLayoutItems>
</TelerikTileLayout>

<input />

<script suppress-error="BL9992">

    function removeTabindexFromTiles(selector) {
        var tileLayout = document.querySelector(selector);

        if (!tileLayout) {
            return;
        }

        tileLayout.querySelectorAll(".k-tilelayout-item").forEach(el => {
            el.removeAttribute("tabIndex");
        });
    }

</script>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await Task.Delay(1); // ensure HTML is ready
            await js.InvokeVoidAsync("removeTabindexFromTiles", ".tilelayout-tabindex-remove");
        }

        await base.OnAfterRenderAsync(firstRender);
    }
}

The OnBlur event does not fire after removing an item wehn using TagMode="@MultiSelectTagMode.Single"

I used this snippet in the Blazor REPL to reproduce the issue:

<p>@OnBlurMessage</p>
<TelerikMultiSelect Data="@Countries"
                    @bind-Value="@SelectedCountries"
                    TagMode="@MultiSelectTagMode.Single"
                    Placeholder="Enter Balkan country, e.g., Bulgaria"
                    Width="350px" 
                    ClearButton="true"
                    AutoClose="false"
                    OnBlur="OnBlurHandler">
</TelerikMultiSelect>

@code {
    private List<string> Countries { get; set; } = new List<string>();

    private List<string> SelectedCountries { get; set; } = new List<string>();
    string OnBlurMessage {get; set;} = "";
    int i;

    protected override void OnInitialized()
    {
        Countries.Add("Albania");
        Countries.Add("Bosnia & Herzegovina");
        Countries.Add("Bulgaria");
        Countries.Add("Croatia");
        Countries.Add("Kosovo");
        Countries.Add("North Macedonia");
        Countries.Add("Montenegro");
        Countries.Add("Serbia");
        Countries.Add("Slovenia");
        base.OnInitialized();
    }

    void OnBlurHandler()
    {
        OnBlurMessage = $"OnBlurHandler touched {++i} times";
    }
}

Steps to reproduce:

1. Select an item from the list then click out of the control.  Note that the comments shows "OnBlurHandler touched 1 times".
2. Click the x for the "1 item(s) selected" tag then click outside of the control.  Note that the comment still shows "OnBlurHander touched 1 times".
3. Click into the control then outside of control.  Note that the comment is updated to show "OnBlurHandler touched 2 times".

The OnBlur event should fire after step 2.

Attached is a short video clip of what I see.

If the editor's HTML markup contains inline CSS styles, and a CSS attribute value includes a semicolon (;), it breaks the applied styles and throws an exception.

For example:

<p style= "" ....background-image: url('data:image/png;base64...;""</p>

The exception is:

Uncaught TypeError: Cannot read properties of undefined (reading 'trim')

=== ADMIN EDIT ===

The issue can also occur when there is an invalid inline style with two semicolons without a complete style-value pair in-between.

For example:

<p style=""color:red; b ;"">sdf</p>

Check the following configuration: https://blazorrepl.telerik.com/cHvuPOYX27peykXr18 ( SlotDuration="720"  SlotDivisions="1").

The start time of the appointment is 12:00 PM today. The Scheduler, however, displays the start at 12:00 AM on the next day even though the arrow indicates the event continues from the previous day.

For reference, if I set SlotDivisions="2", I get the expected result: https://blazorrepl.telerik.com/GxFOvYED302CzPCo32.

To deactivate all tabs I have to set the ActiveTabIndex parameter to -1.

This was working up to version 4.6.0. After that version I start getting an error:

Here is an example with 4.6.0 where it is working:

https://blazorrepl.telerik.com/QSPuvKvI06m6AhF929

Here is an example with the current version:

https://blazorrepl.telerik.com/mIvOlqlI062NR9Vi59