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>

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

I would like a Blazor PropertyGrid with

-- that could be bound to an instance of a custom Type that implemented INotifyPropertyChanged

-- with expandable/collapsible sections with the ability to prevent a  user from expanding a collapsed section (e.g. the user lacks privileges to see that section's data)

-- would keep track of its UI state including collapsed sections (similar to the excellent implementation in Telerik's  Blazor Grid)

-- that would allow the use of all Telerik Blazor editors as cell-value editors

I am interested in using this component primarily as a data-entry UX in a data-entry-intensive line-of-business application.  Such a grid offers standard navigation on all data-entry screens in the application, eliminating tab-order, thereby greatly simplifying the end-user experience. The expanding/collapsing sections make it very economical in its use of screen real-estate. I have used such a component (from a competitor of Telerik) in a WinForms application with excellent results. 

(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>

When I override the IsValid method to return a ValidationResult the Incell & Inline edit modes allow the editing to be continued even if an invalid value is present. 

===

Telerik edit: A possible workaround is to cancel OnUpdate and possibly, OnEdit too. Here is a complete example:

https://blazorrepl.telerik.com/QyaWxkvv10stL8jB06

• I want to track when the popup element of the DropDownButton is opened and closed.
• I also want to have an Open method via the component reference

===

ADMIN EDIT

===

For the time being, a possible option is to use the DropDownList component that exposes such events. Customize it so it can look and behave similarly to the DropDownButton.

Example implementation: https://blazorrepl.telerik.com/mekbkTPE21kwyMBU05.

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

The PDF Viewer may render parts of the contents as blank (empty space) and only form elements like checkboxes remain visible.

Test PDF file in ticket 1716925

Hi Team,
I would like a parameter that allows users to select a time from the TimePicker popup without having to press Set.

Current behaviour
Selecting an hour or minute in the popup changes its internal pending selection, but does not update the bound Value or fire the public ValueChanged callback. Users must press Set to apply the selection. Clicking outside the popup discards it.

Requested behaviour
Please consider adding an AutoCommit Boolean parameter, defaulting to false to preserve existing behaviour.

When enabled:
- Each valid hour/minute selection immediately updates Value and fires ValueChanged.
- The popup stays open so users can adjust both hours and minutes.
- Clicking outside closes the popup and retains the latest selected time.
- Pressing Set is no longer required.

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)
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 ]