[Date picker] ValueChanged events are fired mutiple times in date picker

[valadzhov]

Description

The ValueChange event is fired when the value is changed and again when the date picker loses focus.

Steps to reproduce

1. Download and start the attached sample.
2. Change the date and pay attention to the counter which represents the number of time the ValueChange event is fired.
3. The counter is incremented.
4. Click outside the date picker - the counter is incremented again.

Result

The ValueChange event is fired twice while it should be only once.

Expected result

The ValueChange event should be fired only once (when changing the date?).

Attachments

Attach a sample if available, and screenshots, if applicable.
date-picker-dev_Blazor-2-date-pickers.zip

[MayaKirova]

@valadzhov @dkamburov The issue is due to Blazor serializing/de-serializing the new set date value when you select something from the calendar as it needs to sync it to the server instance of the component so that the Value prop of the server component is up-to date.

As a result the following check when you blur fails:
https://github.com/IgniteUI/igniteui-webcomponents/blob/master/src/components/date-time-input/date-time-input.ts#L624

Since after deserialization on the client, this value is no longer the same object ref, hence the date input will emit a change event for it.

Not much we can do about it from the Blazor side. What I can suggest is maybe improve the check on the wc component to compare whether the date value is actually the same, rather than comparing the date object refs. Since currently even if you input the same date multiple times, it would raise a change event each time. For example, if you type in “11/11/1111” and blur and then repeat the same multiple times it will always trigger the change event on blur even though the dates represent the same time and there is no actual change.

[dkamburov]

@rkaraivanov fyi