Unplanned
Last Updated: 15 Sep 2020 17:25 by ADMIN
Avromi
Created on: 15 Sep 2020 16:35
Category: UI for Blazor
Type: Bug Report
1
Numeric Text box value disappears when focusing after clearing its value, disabling it and enabling it again

I have a numeric text box that is bound to a nullable int. There is also a combo box on the page that will auto set the value and disable the numeric text box if certain values are selected. as follows:



<TelerikComboBox Data="@TareTypes" TextField="Name" ValueField="Id" ValueExpression="@(() => Material.TareTypeId)" ValueChanged="@((int? e) => TareTypeChanged(e))" Width="200px" Placeholder="Tare Type" ClearButton="true"></TelerikComboBox>

<TelerikNumericTextBox @bind-Value="@Material.TareWeight" Arrows="false" Enabled="@tareWeightEnabled" ></TelerikNumericTextBox>

and the code...


private void TareTypeChanged(int? tareTypeId)
        {
            Material.TareTypeId = tareTypeId;
            tareWeightEnabled = true;
            if (tareTypeId > 0)
            {
                var tareTypeWeight = TareTypes.Single(t => t.Id == tareTypeId).Weight;
                if (tareTypeWeight.HasValue)
                {
                    Material.TareWeight = tareTypeWeight;
                    tareWeightEnabled = false;
                    editContext.NotifyFieldChanged(editContext.Field("TareWeight"));
                }
            }
        }

the following steps should reproduce the problem

 

  1. enter a value in the numeric text box and then clear it out
  2. select a value from the combo box that auto sets the numeric text box value and disables it
  3. select a value from the combo box that re-enables the text box. At this point the value is still visible in the text box (as it should be) and the text box is enabled
  4. Focus in the text box. this causes the number to disappear. it's as if the number was just a place holder which clears out when you focus on the control.
1 comment
ADMIN
Marin Bratanov
Posted on: 15 Sep 2020 17:25

Hello Avromi,

Thank you for this report. I have updated the title and I am adding here a simpler reproducible for other people who may hit this.

<ol>
    <li>Clear the value in the numeric</li>
    <li>disable it through the button</li>
    <li>enable it through the button</li>
    <li>click in the numeric</li>
</ol>

<strong>Expected</strong>: focus in the numeric
<br />
<strong>Actual</strong>: the value disappears from the numeric when it gets focus
<br />

<TelerikNumericTextBox @bind-Value="@Material.TareWeight" Enabled="@tareWeightEnabled"></TelerikNumericTextBox>
<TelerikButton OnClick="@ToggleEnaled">Toggle Enabled</TelerikButton>

<p>
    @Material.TareWeight
</p>


@code{
    void ToggleEnaled()
    {
        tareWeightEnabled = !tareWeightEnabled;
        if (!tareWeightEnabled)
        {
            Material.TareWeight = 111;
        }
    }

    bool tareWeightEnabled { get; set; } = true;

    SomeModel Material { get; set; }

    protected override void OnInitialized()
    {
        Material = new SomeModel();
        Material.TareWeight = -2;

        base.OnInitialized();
    }

    public class SomeModel
    {
        public int? TareTypeId { get; set; }
        public int? TareWeight { get; set; }

    }
}

 

Regards,
Marin Bratanov
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/.