NumericText field which has decimal as bound model and Format"c2" doesn't format on hitting return
Super specific bug - but if you have a InPlaceEditor for a SfNumericTextBox for a decimal Formatted as c2 with Fluent2 theme- if you hit return, it doesn't format the decimal back into the currency.
If you click out of the field, it formats correctly. But hitting return, it just shows the number. I'm not sure that you need all those specifics to recreate the issue, but here it is recreated:
### SynfusionInline\Components\Pages\Counter.razor
```razor
@using Syncfusion.Blazor
@using Syncfusion.Blazor.InPlaceEditor
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Inputs
@using SynfusionInline.Data
@rendermode InteractiveServer
@page "/counter"
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<SfInPlaceEditor @bind-Value="@vehicle.Cost" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Numeric" TValue="decimal?" EditableOn="EditableType.EditIconClick" ShowButtons="false" EmptyText="Unknown">
<EditorComponent>
<SfNumericTextBox Format="c2" @bind-Value="@vehicle.Cost"></SfNumericTextBox>
</EditorComponent>
<InPlaceEditorEvents OnActionBegin="@(args => UpdateBusinessDetails())" TValue="decimal?"></InPlaceEditorEvents>
</SfInPlaceEditor>
<p role="status">Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
public Vehicle vehicle { get; set; } = new Vehicle();
private int currentCount = 0;
public async Task UpdateBusinessDetails()
{
if (vehicle != null)
{
//await ClientService.UpdateBusinessDetailsAsync(BusinessDetails);
}
}
private void IncrementCount()
{
currentCount++;
}
}
```
### SynfusionInline\Data\Vehicle.cs
```csharp
namespace SynfusionInline.Data
{
public class Vehicle
{
public int VehicleId { get; set; }
public string Year { get; set; }
public string Make { get; set; }
public string Model { get; set; }
public string VIN { get; set; }
public decimal? Cost { get; set; }
public string LicensePlate { get; set; }
public DateTime RegistrationDate { get; set; }
public string CountryOfRegistration { get; set; }
}
}
```
### SynfusionInline\Components\App.razor
```razor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base rel='nofollow' href="/" />
<link rel="stylesheet" rel='nofollow' href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" />
<link rel="stylesheet" rel='nofollow' href="@Assets["app.css"]" />
<link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/fluent2.css" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
<link rel="stylesheet" rel='nofollow' href="@Assets["SynfusionInline.styles.css"]" />
<ImportMap />
<link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />
<HeadOutlet @rendermode="PageRenderMode" />
</head>
<body>
<Routes @rendermode="PageRenderMode" />
<script src="_framework/blazor.web.js"></script>
</body>
</html>
@code {
[CascadingParameter]
private HttpContext HttpContext { get; set; } = default!;
private IComponentRenderMode? PageRenderMode =>
HttpContext.AcceptsInteractiveRouting() ? InteractiveServer : null;
}
```
### SynfusionInline\Components\Layout\MainLayout.razor
```razor
@inherits LayoutComponentBase
<div class="page">
<div class="sidebar">
<NavMenu />
</div>
<main>
<div class="top-row px-4">
<a rel='nofollow' href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
</article>
</main>
</div>
<div id="blazor-error-ui" data-nosnippet>
An unhandled error has occurred.
<a rel='nofollow' href="." class="reload">Reload</a>
<span class="dismiss">đź—™</span>
</div>
```
### SynfusionInline\Components\Layout\MainLayout.razor.css
```css
.page {
position: relative;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
.sidebar {
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
.top-row {
background-color: #f7f7f7;
border-bottom: 1px solid #d6d5d5;
justify-content: flex-end;
height: 3.5rem;
display: flex;
align-items: center;
}
.top-row ::deep a, .top-row ::deep .btn-link {
white-space: nowrap;
margin-left: 1.5rem;
text-decoration: none;
}
.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
text-decoration: underline;
}
.top-row ::deep a:first-child {
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 640.98px) {
.top-row {
justify-content: space-between;
}
.top-row ::deep a, .top-row ::deep .btn-link {
margin-left: 0;
}
}
@media (min-width: 641px) {
.page {
flex-direction: row;
}
.sidebar {
width: 250px;
height: 100vh;
position: sticky;
top: 0;
}
.top-row {
position: sticky;
top: 0;
z-index: 1;
}
.top-row.auth ::deep a:first-child {
flex: 1;
text-align: right;
width: 0;
}
.top-row, article {
padding-left: 2rem !important;
padding-right: 1.5rem !important;
}
}
#blazor-error-ui {
color-scheme: light only;
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
```
### SynfusionInline\Program.cs
```csharp
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using Syncfusion.Blazor;
using SynfusionInline.Components;
using SynfusionInline.Components.Account;
using SynfusionInline.Data;
var builder = WebApplication.CreateBuilder(args);
// Add services to the container.
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
builder.Services.AddCascadingAuthenticationState();
builder.Services.AddScoped<IdentityUserAccessor>();
builder.Services.AddScoped<IdentityRedirectManager>();
builder.Services.AddScoped<AuthenticationStateProvider, IdentityRevalidatingAuthenticationStateProvider>();
builder.Services.AddSyncfusionBlazor();
Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense("MzU0OTQ3OUAzMjM3MmUzMDJlMzBjTXZyRGxuZGlJeHcrb2R6TWFjNFY4MjNNYWJSeTlRMlNGVEpOSDFvZnNvPQ ==");
builder.Services.AddAuthentication(options =>
{
options.DefaultScheme = IdentityConstants.ApplicationScheme;
options.DefaultSignInScheme = IdentityConstants.ExternalScheme;
})
.AddIdentityCookies();
var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? throw new InvalidOperationException("Connection string 'DefaultConnection' not found.");
builder.Services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(connectionString));
builder.Services.AddDatabaseDeveloperPageExceptionFilter();
builder.Services.AddIdentityCore<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddSignInManager()
.AddDefaultTokenProviders();
builder.Services.AddSingleton<IEmailSender<ApplicationUser>, IdentityNoOpEmailSender>();
var app = builder.Build();
// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
app.UseMigrationsEndPoint();
}
else
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseAntiforgery();
app.MapStaticAssets();
app.MapRazorComponents<App>()
.AddInteractiveServerRenderMode();
// Add additional endpoints required by the Identity /Account Razor components.
app.MapAdditionalIdentityEndpoints();
app.Run();
```
We have considered the reported scenario "The numeric values are not properly formatted based on the format property" as a bug from our end. The fix for this issue is scheduled to be included in our upcoming release in the first week of January 2025.
You can track the status of this issue through the following link:
Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”
IsFocus variable in the Numeric TextBox instance remained true upon pressing Enter. However, since the component was being destroyed in the InPlaceEditor, it led to the reported issue.SubmitOnEnter property is properly evaluated. If SubmitOnEnter is true, the relevant property of the Numeric TextBox instance is set to false, resolving the issue.- 2 Replies
- 2 Participants
-
NS Nathan Smith
- Nov 30, 2024 10:37 AM UTC
- Jan 16, 2025 04:56 AM UTC
