Bug report

Reproduction of the problem

(bug report only)
1. Run this example: https://blazorrepl.telerik.com/cUaBGOOZ34pkp6wB57
2. Inspect the MultiSelect’s input.
3. Click within the component’s input area, to open its popup.

The issue is also reproducible in the other dropdown components: https://blazorrepl.telerik.com/GUurGmvw32oPqGYu03

Current behavior

(optional)
When the dropdown opens, an aria-controls attribute is applied to the MultiSelect’s input. Its value does not match any existing DOM element.

Expected/desired behavior

The value of the aria-controls attribute should point at an existing element (e.g., the popup’s list element: https://www.telerik.com/blazor-ui/documentation/components/multiselect/accessibility/wai-aria-support#multiselect-wrapping-element ). But in this case the MultiSelect is not bound to data and a list element is not rendered in the popup.

Environment

• Kendo/Telerik version: 14.1.0
• jQuery version:
• Browser: [all ]

Bug report

Reproduction of the problem

Related to https://progresssoftware.atlassian.net/browse/BLZ-3112

(bug report only)

1. Run this example: https://blazorrepl.telerik.com/wqlEwZbI56m31kAM53
2. Inspect the MultiSelect’s input.
3. Click within the component’s input area to open its popup.

The issue is also reproducible in the other dropdown components.

Current behavior

(optional)
The aria-activedescendant attribute on the <input> element points to a non-existent element.

Expected/desired behavior

The aria-activedescendant attribute on the <input> element must point to the unique id string of the currently active (visually highlighted) <li role="option"> inside the popup listbox. When the popup opens but no item is highlighted (as in the case where the component is not bound to data) the attribute should omitted.

Environment

• Kendo/Telerik version: 15.1.0
• Browser: [all ]

Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (#\39 374a450-079d-4586-b823-d6bc7723505f)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: Hermes Home - https://localhost/TrafficLoss

Element path: #\39 374a450-079d-4586-b823-d6bc7723505f

Snippet: <div class="k-grid-aria-root" id="9374a450-079d-4586-b823-d6bc7723505f" role="grid" aria-label="Data table">

How to fix: 
Fix any of the following:
  Element has children which are not allowed (see related nodes)
  Element has no aria-busy="true" attribute

Environment: Microsoft Edge version 111.0.1661.41

====

This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

============================  code =============================

                           <TelerikGrid Data="@ViewModel.RDLInformation" TItem="TLSummary"
                                                        Pageable="true" 
                                                        Sortable="true" 
                                                        Groupable="false"
                                                        FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
                                                        Resizable="true" 
                                                        Reorderable="true"
                                                        Height = "100%">

....

                            </TelerikGrid>

Bug report

Reproduction of the problem

Environment

• Version 15.1.0
• Blazor Server, .NET 10
• Chromium (Chrome and Playwright headless)

Grid ColumnDraggable is never destroyed
In Components/Common/Grid/Rows/TableHeaderRow.cs, Dispose() calls base.Dispose() first, which sets IsDisposed = true. It then calls DestroyColumnDraggable(), which uses InvokeAsync<object>. That method returns early when IsDisposed is true (BaseComponent.InvokeAsync<T>), so destroyColumnDraggable is never sent to the browser. DestroyColumnReorderable() and DestroyColumnResizable() work because they use InvokeVoidAsync, which has no such check.

As a result, every grid with Reorderable="true" or Groupable="true" leaves "<dataId>-telerik-ColumnDraggable" in window.TelerikBlazor._instances. Its draggable.element (the grid's .k-grid-header) keeps the whole disposed page reachable, so the page is never garbage collected.

1. Create two routable pages. Page A has a TelerikGrid with Reorderable="true" and a TelerikTabStrip with a few tabs. Page B is empty.
2. Open Page A, then navigate to Page B with the in-app router (no full reload).
3. Run this in the browser console:

Object.entries(TelerikBlazor._instances)
     .filter(([k, i]) => i && i.element && !i.element.isConnected)
     .map(([k, i]) => k + ' / ' + i.constructor.name)

Sample project attached.

TelerikBlazorApp1.zip

Current behavior

(optional)
one "...-telerik-ColumnDraggable" entry per reorderable or groupable grid, all pointing at detached elements. Each pageA -> pageB round trip adds more, and the detached DOM is never released.

Expected/desired behavior

An empty array is returned. Page A's components were disposed, so their JS instances should have been destroyed.

Workaround

After each navigation, we destroy and remove any registered instance whose element is no longer in the page:

   const instances = window.TelerikBlazor && window.TelerikBlazor._instances;
   for (const key of Object.keys(instances || {})) {
       const i = instances[key];
       if (i && i.element && !i.element.isConnected) {
           try { i.destroy && i.destroy(); } catch (e) { }
           delete instances[key];
       }
   }

Suggested Fix

1. In TableHeaderRow.DestroyColumnDraggable(), use InvokeVoidAsync, as DestroyColumnReorderable() does. Or call the destroy methods before base.Dispose().

Environment

• Kendo/Telerik version:
• Browser: [Chrome XX, Firefox]

In version 15.1.0, the Editor causes a browser freeze when it contains a custom tool and the Value is changed programmatically. It works as expected in version 15.0.1.

The issue occurs only in WebAssembly apps.

Test page:

@using Telerik.Blazor.Components.Editor

<TelerikButton OnClick="@(() => EditorValue = "<p>baz</p><p>baz</p>")" ButtonType="@ButtonType.Button">Change Editor Value</TelerikButton>

<TelerikEditor Tools="@EditorTools"
               @bind-Value="@EditorValue">
    <EditorCustomTools>
        <EditorCustomTool Name="CustomEditorTool">
            custom tool here
        </EditorCustomTool>
    </EditorCustomTools>
</TelerikEditor>

@code {
    private string EditorValue { get; set; } = @"<p>foo</p><p>bar</p>";
    private List<IEditorTool> EditorTools { get; set; } = new();

    protected override void OnInitialized()
    {
        EditorTools.Add(new CustomTool("CustomEditorTool"));

        base.OnInitialized();
    }
}

Entering dates in the Blazor spreadsheet act weird if you enter a 2 digit year. It seems to subtract a day when you remove focus from the cell.

Start by entering a date like 2/2/25:

Then hit enter or otherwise remove focus from the cell and this is what it changes it to. Notice it subtracts a day:

Then put focus back on the cell:

Now look at the editor at the top:

I note that when you enter a two digit year in Excel it defaults the century to 20 when you enter a year less than 30. It defaults a century of 19 when you enter a year >= 30. It appears that with the Telerik Blazor spreadsheet it always defaults the century to 19. You can make arguments on either side of that but the real issue here is that it subtracts a day when you enter a two digit year. It doesn't do that when you enter a 4 digit year.

The related thing that becomes an issue is when you export the spreadsheet to a byte array and evaluate the cell RawValue. When you enter a 4 digit year, you get a raw value that is a positive number and you can use FormatHelper.ConvertDoubleToDateTime to get the date value. When you enter a 2 digit year and get the raw value, it is a negative number, and when you call FormatHelper.ConvertDoubleToDateTime it returns null.

Can you please comment on the rhyme or reason the spreadsheet behaves this way? Or is this a bug(s)?

Thanks.

Bug report

Reproduction of the problem

(bug report only)
Regression introduced in 15.1.0.

1. Run this example on a mobile device: https://blazorrepl.telerik.com/wUlaGWlv26jsx5Mi00

1. Attempt pinch-to-zoom over the Map.

Current behavior

(optional)
A js exception is thrown (see details in the related ticket).

Expected/desired behavior

Zoom in/out works as expected.

Workaround:

https://blazorrepl.telerik.com/QKbkwiFl21IX6YvX13

Environment

• Kendo/Telerik version:
• Browser: [ Mobile Chrome XX ]

Bug report

Reproduction of the problem

(bug report only)
The clear button in the ComboBox (MultiColumnComboBox, etc.) currently renders as a span element and has the following attributes:

<span class="k-clear-value" role="button" tabindex="-1" title="Clear">
  ...
</span>

Excluding a button from the Tab key sequence does not hide it from a screen reader user. A screen reader user navigating by virtual cursor (using arrow keys or "next button" shortcuts) can and will still find this span element. When they arrive at it, they will hear "Clear, button." Naturally, they will press Enter or Space to activate it.

Current behavior

(optional)
Provide additional information if the steps for reproducing the faulty behavior are not sufficient to describe the issue.

Expected/desired behavior

Make the span WCAG 4.1.2 compliant: https://www.w3.org/WAI/standards-guidelines/act/rules/97a4e1/

<span 
  class="k-clear-value" 
  role="button" 
  tabindex="-1" 
  aria-label="Clear selection"
  title="Clear">
  ...
</span>

We can also consider completely hiding the span from screen readers, by rendering aria-hidden="true" on the span element, for example: 

<span 
  class="k-clear-value" 
  role="button" 
  tabindex="-1" 
  aria-hidden="true">
</span>

The Kendo Angular ComboBox implements a similar approach. This will be in accordance with WCAG 4.1.2, because aria-hidden="true" removes the element from the accessibility tree entirely, it is no longer parsed as an active UI component by screen readers.

TicketID:

(optional)
Provide the TicketID, where the bug report initiated.

Environment

• Kendo/Telerik version:
• Browser: [all ]

Hello,

When a Grid is using multi column headers, and I add one more column in the OnBeforeExport event, this new column has no title in the exported file.

A possible workaround might be to use a column with zero Width and change the width in OnBeforeExport.

@using Telerik.Blazor.Common.Export.Excel
@using Telerik.Blazor.Components.Grid

<TelerikGrid TItem="@FlowRun"
             Pageable="true"
             OnRead="@GetData">

    <GridToolBar>
        <GridCommandButton Command="ExcelExport" Icon="file-excel">Export to Excel</GridCommandButton>
        <GridCommandButton Command="CsvExport" Icon="file-csv">Export to CSV</GridCommandButton>
        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBar>

    <GridExport>
        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeExcelExport" />
        <GridCsvExport FileName="telerik-grid-export" AllPages="@ExportAllPages" OnBeforeExport="@BeforeCsvExport" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(FlowRun.FileName)" Title="File Name" Width="300px" />
        <GridColumn Field="@nameof(FlowRun.Type)" Title="Type" Width="100px" />
        <GridColumn Field="@nameof(FlowRun.FileSize)" Title="File Size" Width="200px" />
        <GridColumn Title="Source">
            <Columns>
                <GridColumn Field="@(nameof(FlowRun.Source))" Title="MPID"/>
                <GridColumn Field="@(nameof(FlowRun.SourceFileProtocol))" Title="Type" />
            </Columns>
        </GridColumn>
        <GridColumn Field="@nameof(FlowRun.ErrorMessage)"
                    Title = "Error"
                    Width="0" />
    </GridColumns>
</TelerikGrid>

@code {
    bool ExportAllPages { get; set; }

    private async Task GetData(GridReadEventArgs args)
    {
        args.Data = Enumerable.Range(1, 10).Select(x => new FlowRun
            {
                FileName = $"File {x}",
                Type = $"Type {x}",
                FileSize = x * 2,
                Source = $"Source {x}",
                SourceFileProtocol = FileProtocol.CIX,
                ErrorMessage = $"Error {x}"
            }).ToList();

        args.Total = 100;
    }

    private void BeforeCsvExport(GridBeforeCsvExportEventArgs obj)
    {
        AddErrorMessageColumn(obj);
    }

    private void BeforeExcelExport(GridBeforeExcelExportEventArgs obj)
    {
        AddErrorMessageColumn(obj);
    }

    private void AddErrorMessageColumn(GridBeforeSpreadsheetExportEventArgs args)
    {
        args.Columns.Find(x => x.Field == nameof(FlowRun.ErrorMessage)).Width = "100px";

        //args.Columns.Add(new ExcelExportableColumn
        //{            
        //    Field = nameof(FlowRun.ErrorMessage),
        //    Title = "Error"
        //});
    }

    public class FlowRun
    {
        public string FileName { get; set; }
        public string Type { get; set; }
        public long? FileSize { get; set; }
        public string Source { get; set; }
        public FileProtocol SourceFileProtocol { get; set; }
        public string ErrorMessage { get; set; }
    }

    public enum FileProtocol
    {
        Unknown,
        PIX,
        CIX,
        SS
    }
}

Example:

<PageTitle>Home</PageTitle>

<div>
    <TelerikTextBox Width="20rem" Placeholder="Pallet" DebounceDelay="1000" @bind-Value="@_textInput" OnChange="@(async (input) => await OnInputChanged(input))" />
</div>
<p>@_textInput</p>


@code {
    private string? _textInput;

    private async Task OnInputChanged(object input)
    {
        Console.WriteLine($"Immediate: function parameter: {input}, bound variable: {_textInput}");
        await Task.Delay(1000);
        Console.WriteLine($"Delayed: function parameter: {input}, bound variable: {_textInput}");
        //Make the OnChange event receive the immediate value when the DebounceDelay is set
    }
}

The DebounceDelay is set to 1 second to highlight the behavior, although we have observed it with delays less than 100 milliseconds when the input is from a barcode scanner and the Enter is part of the scan. Start the sample, type "123" in the input, and hit enter within 1 second.

The output in the console is:
Immediate: function parameter: , bound variable:
Delayed: function parameter: , bound variable: 123

(Also applies to AutoComplete, DropDownList, MultiSelect, MultiColumnComboBox).

When using Height="auto" in the popup settings and filtering with a dropdown above the component, the dropdown detaches from the main component.

<ComboBoxPopupSettings Height="auto"></ComboBoxPopupSettings>

https://blazorrepl.telerik.com/cKkSQGFO50ovCpr829

A possible workaround is to use a MaxHeight that is less than half the browser viewport.

<ComboBoxPopupSettings Height="auto" MaxHeight="45vh"></ComboBoxPopupSettings>

• The PDF Viewer does not display the initial file if Zoom is set to FitToWidth or FitToPage. This is due to --scale-factor: NaN; --total-scale-factor: NaN; set on the PDF Viewer element.
• If the PDF Viewer initially shows with no loaded file, setting Zoom to FitToWidth or FitToPage initially or after opening a file leads to infinity zoom due to --scale-factor: Infinity; --total-scale-factor: Infinity; set on the PDF Viewer element.

The only scenario that works is to set the initial Zoom to a numeric value and have an open file by default.

Bug report

Reproduction of the problem

(bug report only)
The label of the filter menu icon displays: “column filter menu settings”. In version 12.0.0 it included the name of the column field.

1. Run this example: https://blazorrepl.telerik.com/cKFaOPvO56rcaHqx16
2. Hover a filter icon in the Grid’s header with the mouse cursor.

Current behavior

(optional)
The label “column filter menu settings” appears.

Expected/desired behavior

The label text includes the column name, e.g., “Price column filter menu settings”.

Workaround:

https://blazorrepl.telerik.com/cUPYaPlO55EJNiKJ24

Environment

• Kendo/Telerik version: 15.0.1
• Browser: [all]

Bug report

Reproduction of the problem

(bug report only)
Environment

• Version 15.1.0
• Blazor Server, .NET 10
• Chromium (Chrome and Playwright headless)

TabStrip Tab is never destroyed
Components/TabStrip/Tab.razor.cs registers each tab with initTabStripTab in OnAfterRenderAsync. Its Dispose() only releases the DotNetObjectReference; it never calls InvokeDisposeAsync(). The JS Tab.destroy() method is therefore never called, and TabStrip.destroy() does not destroy its child tabs. Every tab stays in window.TelerikBlazor._instances with its detached <li class="k-tabstrip-item">, which again keeps the disposed page reachable.

1. Create two routable pages. PageA has TabStrip with 3 tabs. PageB is empty.
2. Open PageA, then navigate to PageB with the in-app router (no full reload).
3. Run this in the browser console:

Object.entries(TelerikBlazor._instances)
     .filter(([k, i]) => i && i.element && !i.element.isConnected)
     .map(([k, i]) => k + ' / ' + i.constructor.name)

Sample project attached.

TelerikBlazorApp1.zip

Current behavior

(optional)
One entry per TabStrip tab is returned, all pointing at detached elements. Each pageA -> pageB round trip adds more, and the detached DOM is never released.

Expected/desired behavior

An empty array is returned. PageA's components were disposed, so their JS instances should have been destroyed.

Workaround

After each navigation, we destroy and remove any registered instance whose element is no longer in the page:

const instances = window.TelerikBlazor && window.TelerikBlazor._instances;
   for (const key of Object.keys(instances || {})) {
       const i = instances[key];
       if (i && i.element && !i.element.isConnected) {
           try { i.destroy && i.destroy(); } catch (e) { }
           delete instances[key];
       }
   }

Suggested Fix

1. In Tab.Dispose(), call InvokeDisposeAsync() before base.Dispose(), as TelerikTabStrip.Dispose() does.

Environment

• Kendo/Telerik version:
• Browser: [Chrome XX , Firefox]

The ComboBox and MultiColumnComboBox retain their TextField string label when the value is cleared programmatically. The issue starts to occur in version 14.1.0.

Test Page:

<ul>
    <li><code>AutoCompleteValue</code>: @AutoCompleteValue</li>
    <li><code>SelectedValue</code>: @SelectedValue</li>
    <li><code>SelectedValueNullable</code>: @SelectedValueNullable</li>
    <li><code>MultiSelectValues</code>: @string.Join(", ", MultiSelectValues)</li>
</ul>

<p>
    <TelerikButton OnClick="@(() => {
        AutoCompleteValue = string.Empty;
        SelectedValue = default;
        SelectedValueNullable = default;
        MultiSelectValues = new();
    })">Clear Values</TelerikButton>
</p>

<TelerikAutoComplete Data="@ListItems"
                     @bind-Value="@AutoCompleteValue"
                     ValueField="@nameof(ListItem.Text)"
                     Placeholder="Select Item"
                     ShowClearButton="true"
                     Width="300px" />

<br /><br />

<TelerikComboBox Data="@ListItems"
                 @bind-Value="@SelectedValue"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Placeholder="Select Item"
                 ShowClearButton="true"
                 Width="300px" />

<TelerikComboBox Data="@ListItems"
                 @bind-Value="@SelectedValueNullable"
                 TextField="@nameof(ListItem.Text)"
                 ValueField="@nameof(ListItem.Id)"
                 Placeholder="Select Item"
                 ShowClearButton="true"
                 Width="300px" />


<br /><br />

<TelerikDropDownList Data="@ListItems"
                     @bind-Value="@SelectedValue"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Id)"
                     DefaultText="Select Item"
                     Width="300px" />

<TelerikDropDownList Data="@ListItems"
                     @bind-Value="@SelectedValueNullable"
                     TextField="@nameof(ListItem.Text)"
                     ValueField="@nameof(ListItem.Id)"
                     DefaultText="Select Item"
                     Width="300px" />

<br /><br />

<TelerikMultiColumnComboBox Data="@ListItems"
                            @bind-Value="@SelectedValue"
                            TextField="@nameof(ListItem.Text)"
                            ValueField="@nameof(ListItem.Id)"
                            Placeholder="Select Item"
                            ShowClearButton="true"
                            Width="300px">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(ListItem.Id)" />
        <MultiColumnComboBoxColumn Field="@nameof(ListItem.Text)" />
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

<TelerikMultiColumnComboBox Data="@ListItems"
                            @bind-Value="@SelectedValueNullable"
                            TextField="@nameof(ListItem.Text)"
                            ValueField="@nameof(ListItem.Id)"
                            Placeholder="Select Item"
                            ShowClearButton="true"
                            Width="300px">
    <MultiColumnComboBoxColumns>
        <MultiColumnComboBoxColumn Field="@nameof(ListItem.Id)" />
        <MultiColumnComboBoxColumn Field="@nameof(ListItem.Text)" />
    </MultiColumnComboBoxColumns>
</TelerikMultiColumnComboBox>

<br /><br />

<TelerikMultiSelect Data="@ListItems"
                    @bind-Value="@MultiSelectValues"
                    TextField="@nameof(ListItem.Text)"
                    ValueField="@nameof(ListItem.Id)"
                    Placeholder="Select Items"
                    ShowArrowButton="true"
                    ShowClearButton="true"
                    AutoClose="false"
                    Width="600px" />

@code {
    private List<ListItem> ListItems { get; set; } = new();

    private int SelectedValue { get; set; } = 3;
    private int? SelectedValueNullable { get; set; } = 3;
    private string AutoCompleteValue { get; set; } = "Item 3";

    private List<int> MultiSelectValues { get; set; } = new() { 3, 5 };

    protected override void OnInitialized()
    {
        ListItems = new List<ListItem>();

        for (int i = 1; i <= 24; i++)
        {
            ListItems.Add(new ListItem()
            {
                Id = i,
                Text = $"Item {i}"
            });
        }

        base.OnInitialized();
    }

    public class ListItem
    {
        public int Id { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}