Description

Entering/Removing spaces in between words does not trigger the ValueChanged event.

Steps To Reproduce

Run this example: https://blazorrepl.telerik.com/wzELPuOs30WSuvzv33

1. Click between the "Lorem" and "ipsum" words.
2. Press the Spacebar key a few times
3. Press the Backspace key a few times

Actual Behavior

The ValueChanged event does not fire when you enter/remove spaces in between words. It fires correctly if you break a word with a space of if you remove all the spaces in between 2 words.

Expected Behavior

ValueChanged should fire on every entered/removed space.

Browser

All

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

No response

In our application we use some large datasets and present them in a TelerikGrid. We use WPF + Blazor Hybrid and noticed, that in some cases the memory usage of the Web View process grows up to some gigabytes.

Here a screenshot of the task manager with a lot of RAM usage for the web view.

Here a screenshot of the detached DOM elements after a two navigations. The container divs are not garbage collected.

I tracked down the issue to come from the TelerikGrid, because when I remove it from the pages, everything runs fine. I also removed all GridColumns and the issue is still present. In the developer tools I noticed that one of the parent div elements remains in memory every time I navigate back and forth.

I also created a blank Blazor WebAssembly Standalone application and added a simple instance of the grid. Here, the issue is also present. I attach the one blazor page that causes the issue.

I've tested all major versions from 5.1 upwards, every version is affected.

The focus indicator on the GridSearchBox is broken when using an outline themes like A11Y, Bootstrap etc.

Workaround:

Temporarily override the overflow style on .k-toolbar-items (e.g., overflow: unset;) using custom CSS to restore the focus indicator.

The following date in the Scheduler RecurrenceRule cannot be parsed and is ignored:

RecurrenceRule = "FREQ=DAILY;UNTIL=20210722T000000"

According to the RFC5545 specification, this should be a valid date format.

These formats will work:

RecurrenceRule = "FREQ=DAILY;UNTIL=2021-07-22T00:00:00"

RecurrenceRule = "FREQ=DAILY;UNTIL=2021-07-22T00:00:00.000Z"

EDIT:

private string TransformRecurrenceRule()
        {
            const string untilSeparator = "UNTIL=";
            var ruleParts = RecurrenceRule.Split(untilSeparator, StringSplitOptions.RemoveEmptyEntries);
            if (ruleParts.Length <= 1)
            {
                // There was no Until clause to worry about
                return RecurrenceRule;
            }

            // Save the first part of the rule
            var ruleBeginning = ruleParts[0];

            // Split the date part of the until clause from any following clauses
            var remainingClauses = ruleParts[1].Split(';', 2, StringSplitOptions.RemoveEmptyEntries);

            //Save the date part of the until clause
            var untilDate = remainingClauses[0];

            // Save any following clauses with the `;` replaced
            var ruleEnding = "";
            if (remainingClauses.Length == 2)
            {
                ruleEnding = $";{remainingClauses[1]}";

            }

            // Convert the until date into .net parsable format
            const string format = "yyyyMMddTHHmmss";
            var date = DateTime.ParseExact(untilDate, format, CultureInfo.InvariantCulture);
            var dateStr = date.ToString("yyyy-MM-ddTHH:mm:ss");

            // recombine rule components
            var newRuleParts = new[] {ruleBeginning, untilSeparator, dateStr, ruleEnding};
            var newRule = string.Join("",newRuleParts);

            return newRule;
        }

The NumericTextBox does not render the new Value that is set in ValueChanged if this new value is different than the event argument. Instead, the component clears the textbox, even though the component Value parameter is correct.

https://blazorrepl.telerik.com/wzaAHYas221go9xd48

The problem occurs only if there is an existing value and the user removes it with Backspace.

When enabling resizing and reordering for the Telerik Grid, using `MinResizableWidth` to set minimal column width will apply the constraint to the column position rather than the actual movable column. This means applying a min width of 200px to the first column will work as expected until the column is moved to another position. Now the column in question no longer has the min width applied, and the column that has moved into the first position has the 200px min width constraint. 

It appears this is due to the constraint being applied to the `data-col-index` rather than the `data-col-initialization-index`, or something to that effect.

The following example has a 200px min-width constraint applied to the "Name" first column, and no custom min-with applied to "Address" second column. Switching the columns by moving the "Name" after the "Address" will apply the constraint to the "Address" and not the "Name".

https://blazorrepl.telerik.com/QJEAcuPE41L7Uhiw44

Currently using 7.1.0 but looks to be an issue in later versions as shown by the REPL example. Tested in Firefox and Chrome.

The column position is arbitrary and the bug isn't due to the constraint being applied to the 0 column, applying the constrain to all even columns then shuffling would result in the constrain still being applied to all even columns.

Description

A pane that has Closeable="false" set does not render a "close" button and should not be closeable through any user interaction. However, pressing the Esc keyboard key (while the pane is floating and has the focus) closes the pane.

Steps To Reproduce

Run the following REPL example: https://blazorrepl.telerik.com/QTkgmKuM23c0uPv125

1. Focus the floating pane.
2. Press the Esc keyboard key.

A slightly different scenario: there are no panes declared in a DockManagerFloatingPanes tag. The user drags a DockManagerContentPane making it float, then presses Esc key: https://blazorrepl.telerik.com/QJuUGUlv43toAJhk40

Actual Behavior

The floating pane closes.

Expected Behavior

The floating pane remains open.

Workaround:
Add the following script to the view:

<script suppress-error="BL9992">
    document.addEventListener(
      "keydown",
      function (e) {
        if (e.key === "Escape" && e.target.classList.contains("k-dock-manager-window")) {
          e.stopImmediatePropagation();
          e.preventDefault();
        }
      },
      true
    );
</script>

Browser

All

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

No response

The TimePicker TimeView resets the date portion of the component Value to today. This does not happen when typing in the DateInput.

The problem is with start-end validation where the start Value gets ahead of the end Value, even if the time parts are valid.

A possible workaround is to use the TimePicker ValueChanged event to override the date part to its previous value, or to set a fixed date value that is the same for the start and end TimePickers.

The scenario is:

• Grid popup editing
• The model class has no parameterless constructor
• The Grid is using a popup <FormTemplate>

In this case, the Grid should not try to create or clone an edit item on its own. Instead, it should rely on the returned instance from OnModelInit. However, the Grid first fires OnModelInit and then it still tries to clone or create an edit item, which causes an exception.

A possible workaround is to manage the whole edit process manually, similar to the example with ListView popup editing.

The application can trigger edit mode through the Gantt state, similar to the how you can trigger edit mode programmatically in the Grid. However, in this case, the Gantt edit form does not show the tabs for editing dependencies and custom model properties.

Test page with a possible JavaScript-based workaround (it requires the item to edit to be rendered:

https://blazorrepl.telerik.com/cpOKmIuC29Unl2B429

Description

The issue is exhibited in the following scenario: a TimePicker bound to a non-nullable DateTime field that is not initialized.
On attempting to change the default time value (only the hours, or the minutes) the TimePicker's validation triggers and after blurring the input shows the default value (12:00 AM). The validation is circumvented by modifying The AM/PM portion of the value. It happens only if the TimePicker uses its default format and only if you type the "A" or "P" letters with the keyboard. Changing AM to PM with the arrow keys does not circumvent the validation.

Steps To Reproduce

Run this REPL example: https://blazorrepl.telerik.com/QJaUFDFw05LBs4Fe22

1. Click the AM part of the value of the first TimePicker.
2. Type "P"

Actual Behavior

The validation is circumvented, because DateValue is updated from 1/1/0001 to the current date.
Re-run the example and try the same with the other TimePicker (which has Format set), as well as with the DateTimePicker.

Expected Behavior

The behavior should be consistent across the board in the different picker components and should not be dependent of the current format.

Browser

All

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

No response

When double-clicking a task in the Gantt Timeline, the popup edit form may not appear. Instead, the vertical blue band for task dragging may show.

The problem is more likely to occur when using a touchpad.

If you are zooming a page containing a DateTimePicker with "AdaptiveMode" set to "AdaptiveMode.Auto", the application crashes occasionally with the error:

Microsoft.JSInterop.JSException: Cannot read properties of null (reading 'addEventListener')
TypeError: Cannot read properties of null (reading 'addEventListener')

The more adaptive DateTimePicker instances the page contains, the more likely the error is to occur.

Steps to reproduce the behavior:

1. Create Blazor WebApp Net 8 6.2.0 project
2. Upgrade project to 7.1.0 version
3. On the Upgrade wizard validation step, see the error:

An error occurred while running the wizard.

Error executing custom action Telerik.Blazor.VSX.Actions.MultiProjectUpdateMasterPageAction: System.InvalidOperationException: Sequence contains no matching element
   at System.Linq.Enumerable.First[TSource](IEnumerable`1 source, Func`2 predicate)
   at Telerik.Blazor.VSX.Actions.AdvancedUpdateMasterPageAction.RetrieveMasterPageSettingsUpgradeInfo(IPropertyDataDictionary arguments, IProjectWrap project)
   at Telerik.Blazor.VSX.Actions.UpdateMasterPageAction.Execute(WizardContext wizardContext, IPropertyDataDictionary arguments, IProjectWrap projectWrap)
   at Telerik.VSX.Actions.ProjectActionBase.Telerik.VSX.Actions.IProjectAction.Execute(IWizardContext wizardContext, IPropertyDataDictionary arguments, IProjectWrap projectWrap)
   at Telerik.VSX.Actions.MultiProjectActionBase`1.Execute(WizardContext wizardContext, IPropertyDataDictionary arguments)
   at Telerik.VSX.WizardEngine.Actions.ActionBase.Telerik.WizardFramework.IAction.Execute(IWizardContext wizardContext, IPropertyDataDictionary arguments)
   at Telerik.VSX.WizardEngine.ActionManager.ExecActions()

I was hoping to use the new AllowCustom feature to let users name a few areas, save those names in the backend and later show them as preselected when the user comes back so they don't have to retype the names every time they do an operation. But alas, the AllowCustom seems to only allow preselecting from what's in the Data list of values.

So code like below doesn't actually show a chip for Rome even though it's preselected. There is a workaround of setting the Data property to a list that contains the custom values I need preselected, but it feels clumsy and with the custom values I feel Multiselect should also check the selected values list for chips to render.

<TelerikMultiSelect 
   @bind-Value="@SelectedCities"
   TItem="string" TValue="string"
   AllowCustom="true"                   
   Width="400px">
</TelerikMultiSelect>

<span>Selected: @SelectedCities.Count</span>

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