diff --git a/packages/components/src/components/form/bal-number-input/bal-number-input.tsx b/packages/components/src/components/form/bal-number-input/bal-number-input.tsx index 40dade76e1..87daf7e5f4 100644 --- a/packages/components/src/components/form/bal-number-input/bal-number-input.tsx +++ b/packages/components/src/components/form/bal-number-input/bal-number-input.tsx @@ -42,7 +42,7 @@ import { } from '../../../utils/form-input' import { debounceEvent, findItemLabel } from '../../../utils/helpers' import { inheritAttributes } from '../../../utils/attributes' -import { getDecimalSeparator, getThousandSeparator } from '../../../utils/number' +import { getDecimalSeparator, getThousandSeparator, getNegativeSymbol } from '../../../utils/number' import { formatInputValue } from './bal-input.utils' import { BEM } from '../../../utils/bem' @@ -226,7 +226,7 @@ export class NumberInput implements ComponentInterface, BalConfigObserver, FormI } private getAllowedKeys() { - return [...NUMBER_KEYS, ...ACTION_KEYS, getDecimalSeparator()] + return [...NUMBER_KEYS, ...ACTION_KEYS, getDecimalSeparator(), getNegativeSymbol()] } private getRawValue(): string { @@ -246,7 +246,7 @@ export class NumberInput implements ComponentInterface, BalConfigObserver, FormI if (!isNaN(parsedValue)) { this.inputValue = parsedValue } else { - if (!this.decimal || input.value !== getDecimalSeparator()) { + if (!this.decimal && input.value !== getNegativeSymbol() && input.value !== getDecimalSeparator()) { this.inputValue = undefined input.value = '' } @@ -260,7 +260,7 @@ export class NumberInput implements ComponentInterface, BalConfigObserver, FormI inputHandleBlur(this, event) const input = getInputTarget(event) - if (input && input.value === getDecimalSeparator()) { + if (input && (input.value === getDecimalSeparator() || input.value === getNegativeSymbol())) { this.inputValue = undefined input.value = '' } @@ -287,7 +287,13 @@ export class NumberInput implements ComponentInterface, BalConfigObserver, FormI } } - if ([...NUMBER_KEYS, getDecimalSeparator()].indexOf(event.key) >= 0) { + if (event.key === getNegativeSymbol()) { + if (value.length !== 0) { + return stopEventBubbling(event) + } + } + + if ([...NUMBER_KEYS, getDecimalSeparator(), getNegativeSymbol()].indexOf(event.key) >= 0) { const newValue = getUpcomingValue(this, event) const decimalValue = newValue.includes(getDecimalSeparator()) ? newValue?.split(getDecimalSeparator())[1] : '' if (decimalValue && decimalValue.length > this.decimal) { @@ -308,7 +314,7 @@ export class NumberInput implements ComponentInterface, BalConfigObserver, FormI if (suffix !== '') { suffix = ` ${suffix}` } - return `[0-9${getThousandSeparator()}${this.decimal > 0 ? getDecimalSeparator() : ''}${suffix}]*` + return `[-0-9${getThousandSeparator()}${this.decimal > 0 ? getDecimalSeparator() : ''}${suffix}]*` } render() { diff --git a/packages/components/src/utils/number.ts b/packages/components/src/utils/number.ts index 12517fb93c..6b051dc478 100644 --- a/packages/components/src/utils/number.ts +++ b/packages/components/src/utils/number.ts @@ -32,3 +32,7 @@ export const parseLocaleNumber = (stringNumber: string): number => { .replace(new RegExp('\\' + decimalSeparator), '.'), ) } + +export const getNegativeSymbol = (): string => { + return '-' +}