Duplicated
Last Updated: 05 Jun 2023 14:41 by Adam
Stewart
Created on: 21 Mar 2023 15:47
Category: MultiColumnComboBox
Type: Bug Report
2
The value in the input is not updated as expected when the component is focused and the user uses the keyboard down arrow.

from this screenshot from the demo selecting a value via the keyboard leaves the box blank

to replicate press the down arrow when MultiColumnComboBox has focus

Duplicated
This item is a duplicate of an already existing item. You can find the original item here:
6 comments
Adam
Posted on: 05 Jun 2023 14:41
Sure thing. Ticket 1611310 was created.
ADMIN
Svetoslav Dimitrov
Posted on: 24 May 2023 10:51

Hello Adam,

This public thread is regarding a bug in the MultiColumnComboBox, in your comment you mentioned the TextBox. I tried to reproduce the issue you are experiencing, however, when submitting the Form, the ValueAtSubmit is correct on my end. Can you take a look at this REPL snippet, use it as a base for reproduction, and open a private ticket where we can discuss the matter? 

Regards,
Svetoslav Dimitrov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Adam
Posted on: 17 May 2023 14:22

Yes, verified in chrome dev tools. The js and css are being sourced from the CDN location and are 4.2.0. I'm running .net7 blazor wasm 7.0.5

I created a repl that is a scaled down version of what I'm doing. I am serializing the object at time of submit so you can see the value of the object at that time instead of it being changed after the OnSubmit is already executed. It is hard to make it happen. I think there is some race condition where the textbox debounced value binding is not finishing before the enter event bubbles up. If I typed fast I could get a version of it to happen where the complete value of the textbox was not updated when the OnSubmit fired. See attached screenshot of result. What I'm seeing in my app is much more pronounced because the form is much bigger and app more complex. In my case the entire property is still null at time of OnSubmit. After the OnSubmit is complete the property has the textbox value. It's almost as if the textbox component should have a enter keypress capture if only just to allow internal processing to finish before re-bubbling the event up the DOM for the form to catch.

I'm not sure how to save the repl I used, but I started with this one:

https://blazorrepl.telerik.com/GnullLvJ241IQ4pv48?_ga=2.204491600.1905434648.1684329158-81929558.1677621695&_gl=1*zd5xf2*_ga*ODE5Mjk1NTguMTY3NzYyMTY5NQ..*_ga_9JSNBCSF54*MTY4NDMyOTE1OC4zNy4xLjE2ODQzMjk1NzEuNjAuMC4w

And changed the razor page contents to be (also attached):

@page "/textbox/overview"
@page "/textbox/index"
@using System.Text.Json
<div class="box-content" style="margin: auto;">
    <EditForm EditContext="FormContext" OnSubmit="FormSubmit">
        <TelerikTabStrip TabPosition="@TabPosition.Top" PersistTabContent="false">
            <TabStripTab Title="Tab 1">
                <Content>
                    <TelerikTextBox Placeholder="FirstName" @bind-Value="FormModel.FirstName"></TelerikTextBox>
                    <h3>SubmitValue</h3>
                    <p>@ValueAtSubmit</p>
                </Content>
            </TabStripTab>
            <TabStripTab Title="Tab 2">
                <Content>
                    <TelerikTextBox Placeholder="FirstName" @bind-Value="FormModel.FirstName"></TelerikTextBox>
                    <h3>SubmitValue</h3>
                    <p>@ValueAtSubmit</p>
                </Content>
            </TabStripTab>
        </TelerikTabStrip>
        
    </EditForm>
</div>
@code {
    private InputObject FormModel { get; set; } = new();
    private EditContext? FormContext { get; set; }
    private string? ValueAtSubmit { get; set; }
    private void FormSubmit(EditContext editContext) {
        ValueAtSubmit = JsonSerializer.Serialize(FormModel);
    }
    public class InputObject {
        public string? FirstName { get; set; }
    }
    protected override void OnInitialized() {
        FormContext = new(FormModel);
        base.OnInitialized();
    }
}

 

ADMIN
Svetoslav Dimitrov
Posted on: 17 May 2023 08:22

Hello Adam,

Can you reproduce the issue from our MultiColumnComboBox live demo? My best guess is that something went wrong while upgrading the version. My suggestion is to follow the upgrade procedure anew and see if it makes a difference. If you are using a CDN link you need to upgrade it as well:

<link rel="stylesheet" href="https://blazor.cdn.telerik.com/blazor/4.2.0/kendo-theme-default/all.css" />

<script src="https://blazor.cdn.telerik.com/blazor/4.2.0/telerik-blazor.min.js" defer></script>

Regards,
Svetoslav Dimitrov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Adam
Posted on: 10 May 2023 17:54

Do you know if this bug was fixed on all telerik blazor components? I am having the issue intermittently where my textbox control has a binding to an object property. If I type into the textbox and hit enter the enter event bubbles up to the form onsubmit and executes, but the model object does not contain the textbox changes. If I hit enter a second time then at this time it has the value applied to the bound object.

I was having this in 4.1.0 and saw this post so I updated to 4.2.0 and I still experience the issue. If no one is sure if this was fixed for textboxes I can open a ticket. Figured I would start here since the bug was documented.

ADMIN
Svetoslav Dimitrov
Posted on: 28 Mar 2023 10:01

Hello Stewart,

We already have an open bug report regarding this behavior. As you can see, it will be fixed as part of our 4.2.0 release. 

Regards,
Svetoslav Dimitrov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.