In-place Editor with Numeric type works inconsistent at different place

Question

Hi team,I prepared a sample project to show the confusing case, a mess, actually. I put same In-place Editor with Numeric type component at Index.razor (I call that E1 below) and InplaceEditorFeatures (E2 below), you can find them easily, the ridiculous things are:1. E1's clear button sets value to -1, and E2 makes it empty.2. both of their "min" limitation dosen't work.3. both of their decimals model dosen't work.4. when set a breakpoint, you can find the cleared value not null but "0" for E2,  but the bind variable is int? type, not to mention the weird "-1" for E1.5. format set to "0" and activated validateDecimalOnType in the model dosen't work while typing in, the decimal point still can be input.What happen to the two identical components? A lot of strange things happened after I upgraded to v18.2.0.44, and I promise all that worked fine in previous versions.Please help me to figure that out, thanks.Attachment: SyncfusionBlazorModel_686cb82.rar

Indrajith Srinivasan · Accepted Answer

Hi Brian,Greetings from Syncfusion support,We have validated your reported queries. Query 1: “1. E1's clear button sets value to -1, and E2 makes it empty. when set a breakpoint, you can find the cleared value not null but "0" for E2, but the bind variable is int? type, not to mention the weird "-1" for E1.” We have validated on the reported query and have considered “When clearing the numeric value, default value is not set properly when Inplace-editor placed inside table” as a bug from our end and logged the report for the same, and the fix will be included with our weekly patch release, which is scheduled on 21st of July. You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/15978/ Query 2: “Both of their "min" limitation doesn't work. Both of their decimals model doesn't work.” When using the NumericTextBox Model as object type the corresponding properties are not binded properly for the Model. For decimal need to set the Format as “n2” 0r “n3” based on the number of decimal places needed. As a workaround, we suggest you to define you the Model like below for the DropDownList. We will also include the existing working behavior with Inplace-editor Model binding within our next weekly patch release scheduled on 14th July. Until then you can use the below way for binding the Model. Feedback link: https://www.syncfusion.com/feedback/15979/ @using Syncfusion.Blazor.InPlaceEditor @using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.Calendars @using Newtonsoft.Json @code { private int? NumericValue1 = 20; private NumericModelClass NumericModel = new NumericModelClass { Placeholder = "Currency format", Format = "n2", ValidateDecimalOnType = true, Max = 25, Min = 0, Decimals = 2, ShowClearButton = true }; public class NumericModelClass { [JsonProperty("placeHolder")] public string Placeholder { get; set; } [JsonProperty("format")] public string Format { get; set; } [JsonProperty("validateDecimalOnType")] public bool ValidateDecimalOnType { get; set; } [JsonProperty("max")] public int? Max { get; set; } [JsonProperty("min")] public int? Min { get; set; } [JsonProperty("decimals")] public int? Decimals { get; set; } [JsonProperty("showClearButton")] public bool ShowClearButton { get; set; } } } Please let us know if you face any difficulties,Regards, Indrajith

Indrajith Srinivasan · Answer

Hi Brian, Thanks for your patience, Query 2: “Both of their "min" limitation doesn't work. Both of their decimals model doesn't work.” We have resolved the issues with Inplace-editor Model bindings and the fix is now available with the Nuget package version 18.2.45. Below is the list of code blocks for Inplace-editor Models. We will also include the same in our documentation. Changes done: Model Before After DropDownList public SfDropDownList DropModel = new SfDropDownList() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public DropDownListModel DropModel = new DropDownListModel() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; DateTime public TimePickerModel TimeModel = new TimePickerModel() { Placeholder = "Select date" }; public TimePickerModel TimeModel = new TimePickerModel() { Placeholder = "Select date" }; @using Syncfusion.Blazor.InPlaceEditor @using Syncfusion.Blazor.RichTextEditor

Built-in Controls

DatePicker
DateTimePicker
DropDownList
MaskedTextBox
NumericTextBox
TextBox

Injectable Controls

AutoComplete
ColorPicker
ComboBox
DateRangePicker
MultiSelect
RTE
Slider
TimePicker

@code { public DateTime DateValue { get; set; } = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day); public DateTime DateTimeValue { get; set; } = DateTime.Now; public DateTime[] DateRangeValue { get; set; } = new DateTime[] { DateTime.Now, DateTime.Now.AddDays(20) }; public DateTime TimeValue { get; set; } = DateTime.Now; public string MaskValue = "123-345-678"; public string NumericValue = "10"; public string TextValue = "Andrew"; public string DropValue = "Android"; public string AutocompValue = "Android"; public string ColorValue = "#81aefd"; public string ComboBoxValue = "Android"; public string[] MultiValue = new string[] { "Android" }; public string RteValue = "

Enter your content here

"; public double SliderValue = 20; public DatePickerModel DateModel = new DatePickerModel() { Placeholder = "Select date" }; public DateTimePickerModel DateTimeModel = new DateTimePickerModel() { Placeholder = "Select date" }; public DropDownListModel DropModel = new DropDownListModel() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public MaskedTextBoxModel MaskedModel = new MaskedTextBoxModel() { Mask = "000-000-000" }; public NumericTextBoxModel NumericModel = new NumericTextBoxModel() { Placeholder = "Enter number" }; public TextBoxModel TextModel = new TextBoxModel() { Placeholder = "Enter some text" }; public AutoCompleteModel AutocompModel = new AutoCompleteModel() { Placeholder = "Select frameworks", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public ComboBoxModel ComboBoxModel = new ComboBoxModel() { Placeholder = "Select frameworks", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public DateRangePickerModel DateRangeModel = new DateRangePickerModel() { Placeholder = "Select date" }; public MultiSelectModel MultiModel = new MultiSelectModel() { Placeholder = "Select frameworks", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } }; public RichTextEditorModel RteModel = new RichTextEditorModel() { Placeholder = "Enter your content here" }; public TimePickerModel TimeModel = new TimePickerModel() { Placeholder = "Select date" }; } Regards, Indrajith

Brian · Answer

Really? Actually your NumericTextBoxModel even dosen't have a "Min" property (nor "Max"). Are you sure you have tested the suggestion above?

Indrajith Srinivasan · Answer

Hi Brian,We deeply regret for the inconvenience caused, 
We have included the missing properties, including the Min and Max properties with NumericTextBoxModel and the fix will be included with our next patch release on 21st July. Until then, we suggest you to use the already suggested workaround.Regards, 
Indrajith

Pandiyaraj Muniyandi · Answer

Hi Brian, 
Thanks for your patience,  
We have resolved the reported issue “When clearing the numeric value, default value is not set properly when Inplace-editor placed inside table” and the fix is now available with the NuGet package version 18.2.46. Also missing properties with Models are included with this NuGet. 
 
Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.2.46/?type=all#in-place-editorCan you please upgrade your package to this version to resolve the issue from your end?  
 
Feedback link: https://www.syncfusion.com/feedback/15978/ 
 
Regards, 
Pandiyaraj

Brian · Answer

No you didn't resolve it. If you update the sample project I provided at the first post to 18.2.0.46, you will see my issue No.1 still occurs. That is, In-place editor in Index.razor still sets its value to -1 when clear button is clicked.

Please re-check the issue, thanks.

Indrajith Srinivasan · Answer

Hi Brian,We have validated your reported query. We suggest you to use the NumericTextboxModel instead of object type to resolve the issue value resetting to -1. 
 
Please get back to us if you face any difficulties, 
 
Regards, 
Indrajith

Brian · Answer

I'm sorry, I meant "0", not "-1" was still set to the In-place Editor of Index.razor. I made a typo. And of course I have used NumericTextBoxModel<int?> instead. I attached the updated sample, You can check for the problem.

Attachment: SyncfusionBlazorModel_64a272af.rar

Indrajith Srinivasan · Answer

Hi Brian,

We have validated your reported query and able to reproduce the issue. The reported issue occurs in index.razor file, since the parent width of the element is auto. In such cases, when clearing the value of the NumericTextBox the min value is set. We suggest you to set the Width for the NumericTextBoxModel to resolve the reported issue.

public NumericTextBoxModel<int?> NumericModel = new NumericTextBoxModel<int?>()

{

Width: “200px”

};

Also, this is not an issue with the component it is the behavior of component if the parent width is auto.

Regards,

Indrajith

Brian · Answer

Thanks for your advice. However, before I try the solution, I have an argument about the mechanism you explained. I think it's unreasonable to relate a component's behavior to its appearance. That is, Whether the NumericTextBox clear its value or not depends on its width, it's of course improper. So I still hope you can work on that and deem it as a bug.

Regards.

Indrajith Srinivasan · Answer

Hi Brian,Good day to you, 
 
We have further validated the reported query and have considered “NumericTextBox value is not set properly when clearing value with in-place editor“ as a bug from our end and the fix will be included with our Volume 2 SP 1 release. Until then, we suggest you to resolve the issue by setting the width for the NumericTextboxModel. 
 
You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/16576/ 
 
Regards, 
Indrajith

Brian · Answer

I am so glad to know you have taken my opinion. Hope you can improve that soon.Regards.

Indrajith Srinivasan · Answer

Hi Brain,Sure, we will let you know once the reported issue is resolved.Regards,Indrajith

Indrajith Srinivasan · Answer

Hi Brian, 
Thanks for your patience, 
 
We have resolved the issue “NumericTextBox value is not set properly when clearing value with in-place editor ” with the Nuget package version 18.2.46. 
 
Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.2.46/?type=all#in-place-editor 
 Can you please upgrade your package to this version to resolve the reported issue from your end ?Regards,Indrajith

Model	Before	After
DropDownList	public SfDropDownList<string, string> DropModel = new SfDropDownList<string, string>() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } };	public DropDownListModel<string> DropModel = new DropDownListModel<string>() { Placeholder = "Android", DataSource = new string[] { "Android", "JavaScript", "jQuery", "TypeScript", "Angular", "React", "Vue", "Ionic" } };
DateTime	public TimePickerModel TimeModel = new TimePickerModel() { Placeholder = "Select date" };	public TimePickerModel<string> TimeModel = new TimePickerModel<string>() { Placeholder = "Select date" };