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 ]

Bug report

Once the user locks a column through the column menu, they cannot unlock it, because the Unlock option remains disabled, while the Locked option remains enabled.

Regression in version 14.1.0. Potentially related to https://github.com/telerik/blazor/pull/14727

Reproduction of the problem

@page "/"

<TelerikGrid Data="@GridData"
             Pageable="true"
             FilterMode="@GridFilterMode.FilterRow"
             Sortable="true"
             ShowColumnMenu="true"
             Width="700px">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="80px" ShowColumnMenu="false" />
        <GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" Width="300px" />
        <GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" Width="300px" />
        <GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" Width="300px" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" Width="300px" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Width="300px" />
    </GridColumns>
</TelerikGrid>

@code {
    private IEnumerable<SampleData> GridData = Enumerable.Range(1, 30).Select(x => new SampleData
        {
            Id = x,
            FirstName = $"FirstName {x}",
            LastName = $"LastName {x}",
            CompanyName = $"Company {x}",
            Team = "team " + x % 5,
            HireDate = DateTime.Now.AddDays(-x).Date
        });

    public class SampleData
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Current behavior

Cannot unlock a locked column, the Unlock option remains disabled.

Expected/desired behavior

The Unlock and Lock options in the column menu must reflect the current column state.

• 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.

The TreeView OnItemContextMenu event should fire only for the clicked item, but it fires for its parents too. The issue started occurring in version 13.0.0.

Test page

https://www.telerik.com/blazor-ui/documentation/components/treeview/events#example

We have a grid with a GridCheckboxColumn that we have configured through a '.unselectable-row' style so that certain elements cannot be selected (those elements with a padlock in the second column cannot be selected).

The grid works correctly in isolation, but when we add a TelerikLoaderContainer that is displayed during data loading process, the grid doesn't working properly: it is possible to select all the enabled elements of the grid using the button in the header of the checkbox column. However it is not possible to deselect them from the button in the header of the checkbox column when there is any unselectable element.

Here it is a link to REPL with a reproducible example: https://blazorrepl.telerik.com/GyYhYXPI24gIYgIJ03

To reproduce the problem, you sholud select all grid elements from the checkbox column header button and try to deselect them. You will not be able to deselect all the elements. 
Now comment the LoaderContainer component and repeat the test. You will see that now it is possible to deselect correctly all the elements.

How can we deselect all the elements from the header while keeping the loadercontainer?

Reproduction with Data parameter

https://blazorrepl.telerik.com/GJYPlrEW485dZtjX55

Reproduction with OnRead

I made a Blazor REPL reproduction: https://blazorrepl.telerik.com/mcuCGpYr4223mhWY49. Run and observe the person label is overlapping the dropdown.

How to reproduce:

1. Get code from the Remote Data Example.
2. Surround the ComboBox with a TelerikFloatingLabel, it will then look like this:

   <TelerikFloatingLabel Text="Person">
   <TelerikComboBox 
                   TItem="@Person" TValue="@int"
                    ScrollMode="@DropDownScrollMode.Virtual"
                    OnRead="@GetRemoteData"
                    ValueMapper="@GetModelFromValue"
                    ItemHeight="30"
                    PageSize="20"
                    TextField="@nameof(Person.Name)"
                    ValueField="@nameof(Person.Id)"
                    @bind-Value="@SelectedValue"
                    Filterable="true" FilterOperator="@StringFilterOperator.Contains">
       <ComboBoxSettings>
           <ComboBoxPopupSettings Height="200px" />
       </ComboBoxSettings>    
   </TelerikComboBox>
   </TelerikFloatingLabel>

I have been having issues adding the month view to a Telerik Blazor scheduler component, when there is grouping. It gives a null reference error any time I try to switch to the month view. I also tried it using the available demo for grouping in Telerik REPL, the only difference I found between my code and the demo was that I had used the ItemsPerSlot parameter.  I added this to the demo, and was able to reproduce the error I was seeing, and I have attached the console output from the REPL demo. I believe there is either a bug with the ItemsPerSlot being used in conjunction with grouping on a scheduler component, or some instruction missing from how to set it up properly to prevent this null reference issue. 

Changed code:

<SchedulerMonthView ItemsPerSlot="5"></SchedulerMonthView>

Demo used:

Blazor Scheduler (Event Calendar) Demos - Grouping | Telerik UI for Blazor

Description

When the ComboBox is bound with the OnRead event, after filtering and pressing the Tab key the highlighted item that matches the user input is not selected. If the ComboBox is bound through the Data parameter, the highlighted item is selected as expected.

Steps To Reproduce

1. Run this REPL example: https://blazorrepl.telerik.com/GKOwYyuD25UuABfR07
2. Focus the ComboBox and type in "BMW"
3. Press the Tab key.

Actual Behavior

The ComboBox is blurred and the BMW item is not selected.

Expected Behavior

The ComboBox is blurred and the BMW item is selected.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

The NOW button in the TimePicker's TimeView sets the time value, according to the server's time zone. Instead, it should use the client-side (user) time zone.

===

Telerik edit:

In the meantime, you can subscribe to the TimePicker's ValueChanged event and detect when the user clicks on Now. In such cases, the event handler will receive the current server time with a small margin of error, that depends on the latency.

<TelerikTimePicker Value="@TimePickerValue"
                   ValueChanged="@( (DateTime? d) => TimePickerValueChanged(d) )">
</TelerikTimePicker>

@code {
    private DateTime? TimePickerValue { get; set; }

    private void TimePickerValueChanged(DateTime? newValue)
    {
        if (newValue.HasValue && newValue - DateTime.Now < new TimeSpan(0, 0, 1))
        {
            // Retrieve and set the correct user's local time. The dummy code below is just for testing.
            TimePickerValue = DateTime.Now.AddMinutes(2);
        }
        else
        {
            TimePickerValue = newValue;
        }
    }
}

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 ]

Description

An input with type="password" should not have a default role. See:
w3c/html-aria#422
https://w3c.github.io/html-aria/#dfn-no-corresponding-role

Steps To Reproduce

Inspect the rendering of the password input in this demo: https://demos.telerik.com/blazor-ui/textbox/password

Actual Behavior

The element renders a role="textbox" attribute.

Expected Behavior

The element does not render a role="textbox" attribute.

Browser

All

Last working version of Telerik UI for Blazor (if regression)

No response

If the GridScrollMode.Virtual is enabled for the Grid, and the NoDataTemplate exceeds the height of the Grid container, a user can infinitely scroll inside the table even when there is no data and the template is displaying.

===ADMIN EDIT===

A possible workaround is to apply "overflow-y: hidden;" when the NoDataTemplate is shown: REPL link.

I am using a Blazor Telerik Grid and implementing a custom TelerikCheckBoxListFilter inside a FilterMenuTemplate.

When a user opens the "Name" filter menu and types a name quickly into the search/filter box, some of the text is removed automatically.

For example, if I type "1234567890" as input, without any delay - some of the letters will be cleared and it is showing as "1246890" in the filter search box. It could be because it is searching in real time, but the user input I am typing is not carried over correctly. See the attached screenshot taken from Telerik Demo site for the above said example.

Below is the column definition I am currently using:

<GridColumn Field="@nameof(Tenant.TenantName)" Title="Name" Width="*" FilterMenuType="@FilterMenuType.CheckBoxList">
    <FilterMenuTemplate Context="context">
        <TelerikCheckBoxListFilter Data="@Model.DistinctTenantNameList"
                                   Field="@(nameof(FilterTenantName.TenantName))"
                                   @bind-FilterDescriptor="@context.FilterDescriptor">
        </TelerikCheckBoxListFilter>
    </FilterMenuTemplate>
</GridColumn>

Hallo,

i want to Render PDF Files with the PDF Viewer Component.

The Data of the PDF is already fetched from the API when the PDF-Viewer starts Rendering the Loading animation appears and freezes.

After a few Seconds the PDF will be Rendered.

The size of the PDF File is about 5MB.

=====

TELERIK EDIT: Here is a possible workaround - replace the built-in PDF Viewer LoaderContainer with another one with a different animation Type.

<div class="pdfviewer-wrapper">
    <TelerikPdfViewer Height="600px" />

    @* With a Loading... label *@
    <TelerikLoaderContainer Class="pdf-loader-container"
                            OverlayThemeColor="@ThemeConstants.Loader.ThemeColor.Light"
                            Size="@ThemeConstants.Loader.Size.Large"
                            Visible="true" />

    @* Without a Loading... label *@
    @*<TelerikLoaderContainer Class="pdf-loader-container"
                                OverlayThemeColor="@ThemeConstants.Loader.ThemeColor.Light"
                                Visible="true">
            <Template>
                <TelerikLoader Size="@ThemeConstants.Loader.Size.Large"
                               Type="@LoaderType.Pulsing" />
            </Template>
        </TelerikLoaderContainer>*@
</div>

<style>
    .pdfviewer-wrapper {
        position: relative;
    }

    .pdf-loader-container,
    .k-pdf-viewer .k-loader-container {
        visibility: hidden;
    }

    .k-pdf-viewer:has(.k-loader-container:not([style*="none"])) + .pdf-loader-container {
        visibility: visible;
    }
</style>

@code {
    private byte[]? PdfViewerData { get; set; }
}

If the Start and End match exactly, the rendering of the Scheduler breaks in Day view. If another view is used, the event looks as if it is rendered on the previous day.

===

ADMIN EDIT

===

A possible workaround for the time being is to use a custom edit form and implement some kind of validation that prevents the user from selecting the same value for the Start and End of an event.

Steps to reproduce
Reproducible with UI for Blazor, as well as UI for ASP.NET Core (PDF.js and DPL processing)

1. Open the attached file in the PDFViewer.

Actual Behavior
The content is visualized distorted, large parts of it are missing, layout is messed up.

Expected Behavior
The document content is visualized properly, as it is with: https://mozilla.github.io/pdf.js/web/viewer.html

Bug report

Reproduction of the problem

(bug report only)
Steps to reproduce:

1. Place a TelerikChart with OnSeriesClick inside a TileLayoutItem

<h4>TileLayout:</h4>

<TelerikTileLayout Columns="1" RowHeight="340px">
    <TileLayoutItems>

        <TileLayoutItem ColSpan="1" RowSpan="1">
            <HeaderTemplate>
                <span>With fix (.k-tilelayout-item.k-card) - header stays stable on click</span>
            </HeaderTemplate>
            <Content>
                <p>Last clicked: <strong>@_lastClicked</strong></p>
                <TelerikChart Width="100%" OnSeriesClick="@OnSeriesClick">
                    <ChartSeriesItems>
                        <ChartSeries Type="ChartSeriesType.Donut"
                                     Data="@_chartData"
                                     Field="@nameof(SliceData.Value)"
                                     CategoryField="@nameof(SliceData.Label)"
                                     ColorField="@nameof(SliceData.Color)">
                        </ChartSeries>
                    </ChartSeriesItems>
                    <ChartLegend Position="ChartLegendPosition.Bottom"></ChartLegend>
                </TelerikChart>
            </Content>
        </TileLayoutItem>

    </TileLayoutItems>
</TelerikTileLayout>

@code {
    private string _lastClicked = "none";

    private List<SliceData> _chartData = new()
    {
        new SliceData { Label = "Confirmed", Value = 42, Color = "#4CAF50" },
        new SliceData { Label = "Pending",   Value = 28, Color = "#FF9800" },
        new SliceData { Label = "Inactive",  Value = 30, Color = "#F44336" }
    };

    private void OnSeriesClick(ChartSeriesClickEventArgs args)
    {
        _lastClicked = args.Category?.ToString() ?? "unknown";
    }

    private class SliceData
    {
        public string Label { get; set; } = "";
        public double Value { get; set; }
        public string Color { get; set; } = "";
    }
}

1. Click any chart series

Current behavior

(optional)
Tile header collapses and disappears.
Root cause: The theme applies overflow: hidden to .k-card, which is the tile's root flex container. When a Chart series is clicked, the Chart briefly inflates the body height, causing the flex layout to squeeze the header to height 0. The overflow: hidden on the root then clips the zero-height header out of view entirely.

Expected/desired behavior

Tile header remains visible

Workaround:

<style>
    .k-tilelayout-item.k-card {
        overflow: scroll;
    }
</style>

Environment

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