diff --git a/.changeset/dry-queens-talk.md b/.changeset/dry-queens-talk.md new file mode 100644 index 000000000..bf046020a --- /dev/null +++ b/.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 diff --git a/packages/core/src/utils/form-input.spec.ts b/packages/core/src/utils/form-input.spec.ts new file mode 100644 index 000000000..68deab8f2 --- /dev/null +++ b/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() + }) + }) +}) diff --git a/packages/core/src/utils/form-input.ts b/packages/core/src/utils/form-input.ts index ff885a051..ea6896357 100644 --- a/packages/core/src/utils/form-input.ts +++ b/packages/core/src/utils/form-input.ts @@ -101,3 +101,21 @@ export const inputHandleChange = (component: FormInput) => { 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 => { + return isEmptyValue(value) ? undefined : value +} + +export const hasValueChanged = (oldValue: any, newValue: any): boolean => { + return parseValue(oldValue) !== parseValue(newValue) +} diff --git a/packages/core/src/utils/mask/context/mask-context.ts b/packages/core/src/utils/mask/context/mask-context.ts index b58547463..dc9456536 100644 --- a/packages/core/src/utils/mask/context/mask-context.ts +++ b/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 { private _value = '' @@ -63,8 +64,7 @@ export abstract class MaskContext { 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) }