🐛 fix(date): onChange is triggered when pressing down on a date

.changeset/dry-queens-talk.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**date**: prevent trigger of value change when new and old value are both empty

packages/core/src/utils/form-input.spec.ts

@@ -0,0 +1,31 @@
+import { isEmptyValue, parseValue, hasValueChanged } from './form-input'
+
+describe('form input', () => {
+  describe('isEmptyValue', () => {
+    test('should check if value is empty', () => {
+      expect(isEmptyValue('')).toBeTruthy
+      expect(isEmptyValue(undefined)).toBeTruthy
+      expect(isEmptyValue(null)).toBeTruthy
+      expect(isEmptyValue([])).toBeTruthy
+      expect(isEmptyValue('01')).toBeFalsy
+    })
+  })
+  describe('parseValue', () => {
+    test('should return undefined if value is considered as empty', () => {
+      expect(parseValue('')).toBe(undefined)
+      expect(parseValue(undefined)).toBe(undefined)
+      expect(parseValue(null)).toBe(undefined)
+      expect(parseValue([])).toBe(undefined)
+      expect(parseValue('01')).toBe('01')
+    })
+  })
+  describe('hasValueChanged', () => {
+    test('should return true if values are not equal', () => {
+      expect(hasValueChanged('', undefined)).toBeFalsy()
+      expect(hasValueChanged(null, undefined)).toBeFalsy()
+      expect(hasValueChanged(undefined, undefined)).toBeFalsy()
+      expect(hasValueChanged([], undefined)).toBeFalsy()
+      expect(hasValueChanged('01', undefined)).toBeTruthy()
+    })
+  })
+})

packages/core/src/utils/form-input.ts

@@ -101,3 +101,21 @@ export const inputHandleChange = <Value>(component: FormInput<Value>) => {
     component.balChange.emit(component.value)
   }
 }
+
+export const isEmptyValue = (value: any): boolean => {
+  return (
+    value === '' ||
+    value === undefined ||
+    value === null ||
+    (Array.isArray(value) && !value.length) ||
+    (typeof value === 'number' && isNaN(value))
+  )
+}
+
+export const parseValue = <Value>(value: Value): Value => {
+  return isEmptyValue(value) ? undefined : value
+}
+
+export const hasValueChanged = (oldValue: any, newValue: any): boolean => {
+  return parseValue(oldValue) !== parseValue(newValue)
+}

packages/core/src/utils/mask/context/mask-context.ts

@@ -1,6 +1,7 @@
 import { MaskComponent } from '../component'
 import { MaskContextEvent, MaskContextOptions } from './mask-context-interfaces'
 import { MaskPosition } from './mask-position'
+import { hasValueChanged } from '../../form-input'
 
 export abstract class MaskContext<T = MaskContextEvent> {
   private _value = ''
@@ -63,8 +64,7 @@ export abstract class MaskContext<T = MaskContextEvent> {
           this._options.component.balInput.emit(this.value)
         }
         if ((eventType === 'change' || eventType === 'blur') && parsedValue !== undefined) {
-          const valueChanged = this._options.component.value !== parsedValue
-          if (valueChanged) {
+          if (hasValueChanged(this._options.component.value, parsedValue)) {
             this._options.component.value = parsedValue
             this._options.component.balChange.emit(parsedValue)
           }