Unplanned
Last Updated: 07 Nov 2024 07:54 by René
René
Created on: 03 Jul 2024 10:13
Category: NumericTextBox
Type: Bug Report
5
SelectOnFocus Parameter for NumericTextBox not working if Format="C" is set

With
<TelerikNumericTextBox @bind-Value="myValue" Format="C" SelectOnFocus="true">
the content of the input is not selected upon focussing.  Without the Format="C" it is.

9 comments
René
Posted on: 07 Nov 2024 07:54

@David: Thank you for confirming the issue of SelectOnFocus not working properly.
@Dimo: Thanks for identifying the underlying bug.  It's hard to provide a reproduction if the bug is Blazor Server only.
Now let's hope for a fix :-)
Regards,

René

ADMIN
Dimo
Posted on: 07 Nov 2024 06:40

Hi David,

Thanks for the follow-up! I made some additional experiments and understood better what was going on:

  • The issue occurs in server apps, but not in WebAssembly apps. REPL is a WebAssembly app.
  • The issue occurs when the Format does not match the underlying component value, so focusing changes the <input> content.

I am reopening the bug report. Here is the generalized test case:

<p>Numeric values: @NumericValue1 and @NumericValue2</p>

<p>The format matches the value. Focusing selects the value:</p>

<TelerikNumericTextBox @bind-Value="@NumericValue1"
                       SelectOnFocus="true"
                       Format="N0"
                       Width="100px" />

<TelerikNumericTextBox @bind-Value="@NumericValue2"
                       SelectOnFocus="true"
                       Format="N1"
                       Width="100px" />

<p>The format does not match the value (happens always with a currency format).
    Focusing must change the input content and does not select the value:</p>

<TelerikNumericTextBox @bind-Value="@NumericValue1"
                       SelectOnFocus="true"
                       Format="N1"
                       Width="100px" />


<TelerikNumericTextBox @bind-Value="@NumericValue2"
                       SelectOnFocus="true"
                       Format="N2"
                       Width="100px" />

@code {
    private decimal NumericValue1 { get; set; } = 1;
    private decimal NumericValue2 { get; set; } = 1.2m;
}

P.S. We even have another public item for this, so I linked them.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

David
Posted on: 06 Nov 2024 21:19

If I can jump in here. I also (using Telerik Blazor 6.2.0) get the same result as Rene when using Format="C". However, something that Rene may, or may not, be seeing is when focusing on the TelerikNumericTextBox control, the contents *do* get selected, but only very very briefly, then the selection goes away.

I looked at your REPL as well, and it works fine there, but in my project, your REPL code does the exact thing as I described above. It very briefly selects the contents of the numeric text box then the contents are immediately deselected. Take away the Format="C" and it works fine and the selection holds.

Here is the code I used in my own project:

@page "/Apps/SelectFocusTest"

<TelerikNumericTextBox @bind-Value="@DecimalValue" Format="C" SelectOnFocus="true" />

@code {
    private decimal DecimalValue = 76;
}

 

I hope this helps to track down the issue with the component, or our code!

ADMIN
Dimo
Posted on: 25 Sep 2024 10:38

Hello René,

We are closing this public item due to lack of enough information and inactivity. If we receive the requested details, we can reopen the request.

Regards,
Dimo
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

ADMIN
Hristian Stefanov
Posted on: 15 Jul 2024 12:46

Hi René,

Take as much time as you need to prepare.

I look forward to receiving the reproduction.

Regards,
Hristian Stefanov
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!
René
Posted on: 12 Jul 2024 13:13

Hello Hristian,

we are using Blazor Server not WebAssembly.

When I find the time I'll try to create a runnable reproduction.  I'm very busy right now so it will take some time.

Regards,

René

ADMIN
Hristian Stefanov
Posted on: 12 Jul 2024 12:58

Hi René,

Thank you for the additional information.

The video you provided indeed shows an issue. To investigate further, we would still need a runnable reproduction of the problem. In the meantime, please take a look at this confirmed bug, which seems similar to your case: SelectOnFocus not working in WebAssembly. Are you using WebAssembly by any chance?

Regards,
Hristian Stefanov
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!
René
Posted on: 10 Jul 2024 10:24
Hello Hristian,
I have tried to change the  REPL to reproduce the bug but so far without success.
In our application the NumericTextBox is located in a Editor Template of a TreeListColumn.  The TreeList is quite complex and hard to reproduce in the REPL.   Due to the lack of time, I have to stop trying to reproduce it for now.  We will go on without the Format="C".
Attached is a zip containing a mp4 screen recording showing the problem.  The numberbox on the left does not use any Format and the numberbox on the right is using Format="C".
Attached Files:
ADMIN
Hristian Stefanov
Posted on: 10 Jul 2024 06:58

Hi René,

I have tried to reproduce the reported problem within this REPL link. As a result, the SelectOnFocus parameter seems to work correctly with Format="C". Please run and test the REPL sample to see if the result you get is the same.

Regards,
Hristian Stefanov
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!