[Bug]: IgcDateTimeInput mutates public value property internally while inputting text but does not emit a change event.

[MayaKirova]

Which component(s) are affected?

Date-time input

Description

While inputting text in the date time editor, internally the value property changes:

• becomes null if the date mask is not filled completely
• becomes the new date when the value is filled completely
  However the igcChange event does not fire for neither change, even though the related prop has been changed internally. The event fires only after blur.

Either:

• The intermediate state while typing should not mutate the public value and should instead reflected in some internal property until blur.
  or
• It should fire igcChange for all internal changes that happen to the public value.

Note: The mismatch between the actual value and when the actual change is emitted becomes a problem if this editor is used in a template where the value can be bound externally, for example as an edit template in the igc-grid. Since any refresh of the template could cause the external value to be re-evaluated and it would no longer match with the internal value, hence it would reset it. Here's a also a sample with grid + date input:
grid+date-time-editor-sample.zip

You'll notice that you cannot input any new value in the date editor, since it constantly resets due to this issue.

Reproduction

1. Run the attached sample.
   9a30325d-301a-4ba4-a6b2-a4138eafb404.zip
2. Observe what happens to the value while typing in the input. Note when igcChange is emitted.

Workaround

N/A

Is this a regression?

No or unsure. This never worker, or I haven't tried before.

Affected versions

4.8.1

Browser/OS/Node environment

N/A

[rkaraivanov]

@MayaKirova
This is by design to mimic the native change event.

Depending on the kind of element being changed and the way the user interacts with the element, the change event fires at a different moment:

• When a <input type="checkbox"> element is checked or unchecked (by clicking or using the keyboard);
• When a <input type="radio"> element is checked (but not when unchecked);
• When the user commits the change explicitly (e.g., by selecting a value from a <select>'s dropdown with a mouse click, by selecting a date from a date picker for <input type="date">, by selecting a file in the file picker for <input type="file">, etc.);
• When the element loses focus after its value was changed: for elements where the user's interaction is typing rather than selection, such as a <textarea> or the text, search, url, tel, email, or password types of the <input> element.

Won't the igcInput event be enough if you have validation while typing?

[MayaKirova]

@rkaraivanov No. If you take a look at the grid sample, you'll notice that no matter what you do you cannot type in a new value in the date input.

That's because as you start typing a new date the lit template gets checked (this comes from angular's change detection I believe, it gets fired on any user interaction, including keydown and there's nothing we can do about it), compares props and since the value that comes from the template binding and the internal component value now are different it sets back the old value. You never get to igcInput event since this all happens while you're typing.