fix(bal-number-input): allow negative numbers

baloise · Dec 19, 2022 · fa100bb · fa100bb
1 parent d75a0ff
commit fa100bb
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
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
@@ -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
@@ -32,3 +32,7 @@ export const parseLocaleNumber = (stringNumber: string): number => {
       .replace(new RegExp('\\' + decimalSeparator), '.'),
   )
 }
+
+export const getNegativeSymbol = (): string => {
+  return '-'
+}