DateEdit: Problem when entering the year manually (only on Azure)

[ageiter]

Hi,

We have a problem with the DateEdit control. If you do not use the DatePicker in DateEdit, but use the keyboard instead, part of the year is deleted again and again when you enter it.

The problem does not seem to be unknown and should have been fixed years ago. It is well described in the following issue: #1791

In our case, however, this only occurs on Azure. We have never observed this on the development system. Only when we deployed to the Azure Web App did this behavior become apparent (which means a show stopper for the launch of our application). Could it have something to do with performance (we have a cheap service plan for the test phase)? Is that even possible, as it should be happening in the browser and not on the server?

We tried various things to find the cause. We made a test page (in the same application), which integrates the control in different ways: with and without validation, different data types (DateTime, DateTime?, DateOnly, DateOnly?), ...
The strange thing is, the problem never occurs on this test page... only in our “real” page. At the moment I don't see any relevant difference between these two pages. But I will continue to expand the test page until I find the relevant difference (it takes a while because of the deployment process).

I don't think it's directly related to the Blazorise component (that's why I didn't record a bug). I have seen at Blazor Bootstrap that they have exactly the same problem (even on their demo site).

At the moment I just have no idea in which direction I could look or change anything... Do you have any ideas?

Note:

• We use the ABP framework
• Blazorise version: 1.5.2

Thanks,
Adrian

[stsrki]

I can only assume that there is something with different cultures between your development system and Azure. Since DateEdit is based on native date input, this means it is fully controlled by the browser and can be affected by the server settings. So first check that.

PS. I would advise against touching Blazor Bootstrap. They are being reported and sued for code infringement, so they could go down at any time.

[ageiter]

Thanks for the fast feedback. I will test this by setting the environment variable LANG (we use Linux as web app operating system).

But since the error occurs on one page and not on the other (in the same app), it will probably go in a different direction...

PS. I would advise against touching Blazor Bootstrap. They are being reported and sued for code infringement, so they could go down at any time.

Don't worry, I'm not planning to use these components. We almost only use the Blazorized components and are very happy with them. I just noticed it when searching Google for solutions.

[ageiter]

Unfortunately, setting the environment variable LANG=de_CH.UTF-8 did not help...

[ageiter]

I have now replaced the control with the one from DevExpress as a test. It works there (probably because they use the input type=“text”). Basically, I would prefer to use the Blazorise control ( consistent look), but if I can't find a solution to the problem, I'll probably have to switch to DevExpress.

[stsrki]

We could try to solve the problem, if possible. But we would need a way to at least reproduce the problem on our side.

Is it an option to use DatePicker instead? Unlike native DateEdit, it uses input type=“text” so these problems should not be happening. We are also working on making them into DataGrid #5719

[ageiter]

Since I could not reproduce the problem on a new test page, it is difficult to give you an example.

But of course the DatePicker is a good option. Thanks for the tip, it works perfectly.

[ageiter]

So that I have the same configuration for all DatePickers, I wanted to outsource it to a separate component. I still have a problem with <Feedback><ValidationError /></Feedback>:

Error: System.InvalidOperationException: Object of type 'Palma.Blazor.Components.Controls.PalmaDatePicker' does not have a property matching the name 'ChildContent'.
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.ThrowForUnknownIncomingParameterName(Type targetType, String parameterName)
at Microsoft.AspNetCore.Components.Reflection.ComponentProperties.SetProperties(ParameterView& parameters, Object target)
at Microsoft.AspNetCore.Components.ComponentBase.SetParametersAsync(ParameterView parameters)
at Microsoft.AspNetCore.Components.Rendering.ComponentState.SupplyCombinedParameters(ParameterView directAndCascadingParameters)

My component code:

@using Palma.Localization
@using Volo.Abp.AspNetCore.Components.Web

@inherits PalmaComponentBase

<DatePicker TValue="DateOnly?" @bind-Date="@Date" InputFormat="dd.MM.yyyy" DisplayFormat="dd.MM.yyyy" Placeholder="DD.MM.YYYY" />

using Microsoft.AspNetCore.Components;
using System;
using System.Linq.Expressions;

namespace Palma.Blazor.Components.Controls
{
    public partial class PalmaDatePicker
    {
        [Parameter]
        public DateOnly? Date { get; set; }

        [Parameter] 
        public EventCallback<DateOnly?> DateChanged { get; set; }
        
        [Parameter] 
        public Expression<Func<DateOnly?>> DateExpression { get; set; }
    }
}

Integration in main page:

<Validation MessageLocalizer="@LH.Localize">
    <Field>
        <FieldLabel RequiredIndicator>@L["Page:Termination:TerminationCard:TerminationReceiptDate:Label"]</FieldLabel>
        <PalmaDatePicker @bind-Date="@TerminationModel.TerminationReceiptDate">
            <Feedback>
                <ValidationError />
            </Feedback>
        </PalmaDatePicker>
        <FieldHelp>@L["Page:Termination:TerminationCard:TerminationReceiptDate:Help"]</FieldHelp>
    </Field>
</Validation>

Do I have to add a parameter property for feedback?
I can also include the feedback part in the component, but that didn't work either.

[stsrki]

Yes, you will need to create Feedback parameter and propagate it to DatePicker.

[ageiter]

How to propagate it correctly?

I add this parameter to PalmaDatePicker:

<DatePicker TValue="DateOnly?" @bind-Date="@Date" InputFormat="dd.MM.yyyy" DisplayFormat="dd.MM.yyyy" Placeholder="DD.MM.YYYY" @bind-Feedback="@Feedback">
    </DatePicker>

[Parameter] public RenderFragment Feedback { get; set; }

And now I get the following exception:

An unhandled exception occurred when validating field name: 'Date' of a child object of type: Palma.Blazor.Components.Controls.PalmaDatePicker of model type: 'Palma.Blazor.ViewModels.TerminationViewModel'
System.InvalidOperationException: An unhandled exception occurred when validating field name: 'Date' of a child object of type: Palma.Blazor.Components.Controls.PalmaDatePicker of model type: 'Palma.Blazor.ViewModels.TerminationViewModel'
---> Autofac.Core.Registration.ComponentNotRegisteredException: The requested service 'FluentValidation.IValidator`1[[Palma.Blazor.Components.Controls.PalmaDatePicker, Palma.Blazor, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]' has not been registered. To avoid this exception, either register a component to provide the service, check for service registration using IsRegistered(), or use the ResolveOptional() method to resolve an optional dependency.

See https://autofac.rtfd.io/help/service-not-registered for more info.
at Microsoft.Extensions.DependencyInjection.ServiceProviderServiceExtensions.GetRequiredService(IServiceProvider provider, Type serviceType)
at Blazorise.FluentValidation.FluentValidationHandler.TryGetValidatorForObjectType(Type modelType)
at Blazorise.FluentValidation.FluentValidationHandler.CreateValidator(IValidation validation)
at Blazorise.FluentValidation.FluentValidationHandler.ValidateAsync(IValidation validation, Object newValidationValue, CancellationToken cancellationToken)
--- End of inner exception stack trace ---
at Blazorise.FluentValidation.FluentValidationHandler.HandleException(Exception exception, IValidation validation)
at Blazorise.FluentValidation.FluentValidationHandler.ValidateAsync(IValidation validation, Object newValidationValue, CancellationToken cancellationToken)
at Blazorise.Validation.ValidateAsync(Object newValidationValue)
at Blazorise.Validations.TryValidateAll()
at Blazorise.Validations.ValidateAll()
at Palma.Blazor.Pages.Termination.SaveAsync(Boolean blockUi) in D:\Projects\Palma\Source\Palma\src\Palma.Blazor\Pages\Termination.razor.cs:line 129

[stsrki]

Just use Feedback="@Feedback" without the bind.

[ageiter]

Unfortunately no difference... Same error message.

[stsrki]

Ah, sorry. I was too quick to read the error. You're also missing some extra steps. In this case validation is failing because you didn't defined the Expression parameter which tells it what field to validate.

replace

<DatePicker TValue="DateOnly?" @bind-Date="@Date" InputFormat="dd.MM.yyyy" DisplayFormat="dd.MM.yyyy" Placeholder="DD.MM.YYYY" Feedback="@Feedback" />

with

<DatePicker TValue="DateOnly?" Date="@Date" DateChanged="@DateChanged" DateExpression="@DateExpression" InputFormat="dd.MM.yyyy" DisplayFormat="dd.MM.yyyy" Placeholder="DD.MM.YYYY" Feedback="@Feedback" />

[ageiter]

Ah yes, that's it...

Many thanks for your support. Your fast response time is unique and amazing!

[stsrki]

Glad I could help. We're not always this fast, but we are trying :)