Numeric Textbox with backing Property of type double

[Ivan Temelkov]

Hello,

I'm having difficulty with the SfNumericTextbox (Numeric Text sounds funny :-) ) in a Blazor Server App.

I would like to bind a double? and I'm currently using Italian culture, but the system should be unaware of that.

When I input "12" and then tab out of the control I have the following warning in the DevTool's Console and I lose the value.

If I try to input something with a dot (comma), I get the following error:

The version I'm using is: 20.4.0.41

Could you please give me any ideas how should I fix that?

Thank you in advance,

Ivan

[Sureshkumar P]

Hi Ivan,

Based on your shared error, we cannot replicate the reported issue on our end with Italian culture.

Find the validated sample in the attachment:

If you are still experiencing the issue, please try to replicate it using the sample and let us know the steps you took so we can better understand and address the issue.

Regards,

Sureshkumar P

Attachment: NumericLocale_597004e6.zip

[Ivan Temelkov]

Hi!

Thank you for your reply!

In order to reproduce my issue please add the following to your code.

NumericTextBoxFeatures.razor

...
<SfNumericTextBox TValue="double?" Value=10 HtmlAttributes="@NumericInputAttributes"></SfNumericTextBox>
...
...
@code {
       public Dictionary<string, object> NumericInputAttributes { get; } = new()
        {
            { "type", "number" }
        };
}

Since it is a Numeric TextBox, I certainly would like to have a numeric keyboard on my mobile device.

Strangely, the numeric keyboard is not the default option for Syncfusion's Numeric TextBox, but a lengthy code is required to enable it.

The thing is that this breaks the control in case of backing field ot type double.

Any suggestions?

Best regards,

Ivan

[Sureshkumar P]

Ivan,We have checked your requirement for displaying a numeric keyboard. To achieve your requirement, we suggest you use type as tel with the help of HtmlAttributes.
 

<SfNumericTextBox TValue="double?" HtmlAttributes="@attr"></SfNumericTextBox> 

@code { 

    public Dictionary<string, object> attr = new Dictionary<string, object>() { 

          { "type", "tel" } 

    }; 

} 

[Ivan Temelkov]

Hi,

using attribute "type" with value "tel" is not only semantically incorrect, but also shows a different set of keys, more appropriate for inputting a phone numbers (without surprise).

I did some research and I found out that the attribute "type" is used to enforce some input validation. The correct attribute to hint the browser what keyboard should be displayed would be "inputmode" (not supported in old browsers): 

Everything You Ever Wanted to Know About inputmode

Still it provides different result on different devices and browsers, but in my case using "inputmode" with value "decimal" is good enough.

Best regards,

Ivan

[Shereen Shajahan]

Ivan, Glad to know your issue has been resolved. Please get back to us in the future.

[Ivan Temelkov]

Well,

if by resolved you mean that I decided not to use Syncfusion's NumericTextbox because it doesn't provide valid defaults for mobile devices, yes it is resolved.

I'm just not happy with the fact that I lost time to troubleshoot a component that my company paid for to find myself  developing it from scratch.

[Sureshkumar P]

Ivan, we have provided support for HtmlAttributes properties to add the attributes of the component so we cannot give any specific attribute support to the component. which is the reason we suggest you use the “type=tel” attribute to achieve your requirement. If your requirement is different, you can change the attribute value based on your requirement to achieve your requirement by using the HtmlAttributes property.