Unplanned
Last Updated: 10 Jun 2024 21:22 by ADMIN
Justin
Created on: 16 May 2024 19:51
Category: UI for Blazor
Type: Bug Report
3
SelectOnFocus Not Working in WebAssembly

When SelectOnFocus="true" is enabled on the NumericTextBox control, and a format (e.g., Format="N1") is set, the SelectOnFocus functionality does not select all text if the decimal value has no trailing digits. For instance, with the value 76, the text is not selected on focus, but with the value 76.1, the text is selected correctly.


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

@code {
    private decimal DecimalValue = 76;
}

 

Steps to Reproduce:

  1. Add a NumericTextBox control to a Blazor Server application.
  2. Set SelectOnFocus="true".
  3. Set a format, e.g., Format="N1".
  4. Enter a value such as 76 (with no trailing digits after the decimal point).
  5. Focus on the NumericTextBox.

Expected Behavior: The entire text (in this case, 76.0) should be selected when the NumericTextBox gains focus.

Actual Behavior: The text is not selected when the NumericTextBox gains focus if the value has no trailing digits after the decimal point (e.g., 76). However, if the value includes trailing digits (e.g., 76.1), the text is selected as expected.

4 comments
ADMIN
Hristian Stefanov
Posted on: 10 Jun 2024 21:22

Hi Justin,

I appreciate your extraordinary patience. I am pleased to share an update.

Following my extensive investigations and testing with different projects, I successfully replicated the issue in a WebAssembly project. Indeed, the SelectOnFocus does not work on this type of Blazor app.

Therefore, I'm changing this item's status to Unplanned.

I'm also rewarding you with Telerik points for reporting it.

Thank you once again for your effort.

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!
ADMIN
Hristian Stefanov
Posted on: 30 May 2024 15:37

Hi Justin,

Thank you for providing additional details and sharing your feedback.

I will further discuss the case with our development team and get back to you shortly with more information.

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!
Justin
Posted on: 23 May 2024 17:49

Thank you for your detailed explanation regarding the behavior of the Format="N1" specifier and how numeric formatting typically works in .NET.

However, I believe there is a misunderstanding about the core issue I am reporting. My concern is not about the expected behavior of the Format="N1" specifier in terms of displaying values with or without trailing zeros. Instead, the issue lies with the SelectOnFocus feature not functioning correctly when a format is set in a Blazor Server application; It does work correctly in Blazor WebAssembly.

If these inconsistencies are indeed the expected behavior, it would be very helpful if this information could be noted in the documentation for this feature. Specifically, mentioning that SelectOnFocus may function inconsistently with a Format specifier set when using Blazor Server. That would be valuable for developers.

Thanks

ADMIN
Hristian Stefanov
Posted on: 23 May 2024 15:48

Hi Justin,

The behavior you're observing with the N1 format specifier is consistent with how numeric formatting typically works in .NET.

On the initial display, indeed, the Format="N1" setting ensures the value is displayed with one decimal place. When DecimalValue is set to 76, the component displays it as 76.0. However, let me shed some light on the expected behavior on focus.

Behavior on Focus

When you click on the input field, it shows the raw value without additional formatting. For DecimalValue = 76, the raw value is 76, so it displays as 76 when highlighted. For DecimalValue = 76.1, the raw value is 76.1, so it remains 76.1 when highlighted.

Why ".0" is Stripped When Highlighted

The DecimalValue variable, being a decimal type, does not retain trailing zeros after the decimal point. When displaying normally, Format="N1" ensures it appears with one decimal place. When focused, the component shows the raw value for editing, removing unnecessary trailing zeros (e.g., 76.0 becomes 76).

When the value is 76.1, the decimal place is part of the actual value, so it remains 76.1 both when displayed and when focused.

Summary

This behavior is due to the difference between formatted display and raw value display:

  • Formatted Display: Shows the value with the specified format (e.g., 76.0 with N1).
  • Raw Value Display: Shows the underlying value for editing (e.g., 76 without unnecessary decimal places).

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!