fix(date-time-input): ensure 'igcChange' is emitted in case an incomplete mask value has been filled (#1696)

Author: ddaribo

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Fixed
+- #### DateTime Input
+  - Ensure `igcChange` is emitted in case an incomplete mask value has been filled [#1695](https://github.com/IgniteUI/igniteui-webcomponents/issues/1695)
+
 ## [6.0.0] - 2025-04-29
 ### Changed
 - Minimum Node version required is now >= 20.

src/components/date-time-input/date-time-input.spec.ts

@@ -175,6 +175,24 @@ describe('Date Time Input component', () => {
       expect(input.value).to.equal('22-07-2024');
     });
 
+    it('should emit igcChange on blur after an incomplete mask has been parsed - issue #1695', async () => {
+      const eventSpy = spy(el, 'emitEvent');
+      el.focus();
+      await elementUpdated(el);
+
+      simulateInput(input, {
+        value: '0',
+        inputType: 'insertText',
+      });
+      await elementUpdated(el);
+
+      el.blur();
+      await elementUpdated(el);
+
+      expect(eventSpy).calledWith('igcChange');
+      expect(input.value).to.deep.equal('01/01/2000');
+    });
+
     it('should correctly switch between different pre-defined date formats', async () => {
       const targetDate = new Date(2020, 2, 3, 0, 0, 0, 0);
 

src/components/date-time-input/date-time-input.ts

@@ -609,7 +609,6 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
 
   protected handleBlur() {
     const isEmptyMask = this.maskedValue === this.emptyMask;
-    const isSameValue = this._oldValue === this.value;
 
     this.focused = false;
 
@@ -626,6 +625,8 @@ export default class IgcDateTimeInputComponent extends EventEmitterMixin<
       this.updateMask();
     }
 
+    const isSameValue = this._oldValue === this.value;
+
     if (!(this.readOnly || isSameValue)) {
       this.emitEvent('igcChange', { detail: this.value });
     }