fix(#632): enable X to be entered as last character in claim number

baloise · Jun 17, 2022 · 26606b5 · 26606b5
1 parent 4c2def0
commit 26606b5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/packages/components/src/components/form/bal-input/bal-input.tsx b/packages/components/src/components/form/bal-input/bal-input.tsx
@@ -339,10 +339,11 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
           break
         }
         case 'claim-number': {
+          this.inputValue = input.value.replace(/[^\dX]/g, '')
           const inputParts = [
-            input.value.substring(0, MAX_LENGTH_CLAIM_NUMBER - 1),
-            input.value.substring(MAX_LENGTH_CLAIM_NUMBER - 1, MAX_LENGTH_CLAIM_NUMBER),
-            input.value.substring(MAX_LENGTH_CLAIM_NUMBER),
+            this.inputValue.substring(0, MAX_LENGTH_CLAIM_NUMBER - 1),
+            this.inputValue.substring(MAX_LENGTH_CLAIM_NUMBER - 1, MAX_LENGTH_CLAIM_NUMBER),
+            this.inputValue.substring(MAX_LENGTH_CLAIM_NUMBER),
           ].filter(val => val.length > 0)
           switch (inputParts.length) {
             case 1:
@@ -357,11 +358,11 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
                 '',
               )}`
           }
-          //}
           if (this.inputValue.length > MAX_LENGTH_CLAIM_NUMBER) {
             this.inputValue = this.inputValue.substring(0, MAX_LENGTH_CLAIM_NUMBER)
           }
           input.value = formatClaim(this.inputValue)
+
           if (cursorPositionStart < this.inputValue.length) {
             input.setSelectionRange(cursorPositionStart, cursorPositionEnd)
           }
@@ -394,25 +395,20 @@ export class Input implements ComponentInterface, FormInput<string | undefined>
   }
 
   private onKeydown = (event: KeyboardEvent) => {
-    console.log(
-      'onKeyDown: ',
-      event.key,
-      this.mask === 'claim-number' && event.key === 'X' && this.inputValue?.length === MAX_LENGTH_CLAIM_NUMBER - 1,
-    )
-    console.log('onKeyDown inputValue: ', this.inputValue)
     if (this.mask !== undefined && !isNil(event) && !isCtrlOrCommandKey(event)) {
       if (
         !(
           this.getMaskAllowedKeys().includes(event.key) ||
-          (this.mask === 'claim-number' && event.key === 'X' && this.inputValue?.length === MAX_LENGTH_CLAIM_NUMBER - 1)
+          (this.mask === 'claim-number' &&
+            event.key === 'X' &&
+            this.inputValue &&
+            this.inputValue.length >= MAX_LENGTH_CLAIM_NUMBER - 1)
         )
       ) {
-        console.log('stopped triggering')
         // do not trigger next event -> on input
         return stopEventBubbling(event)
       }
     }
-    console.log('passed x')
   }
 
   private onClick = (event: MouseEvent) => inputHandleClick(this, event)

diff --git a/packages/components/src/components/form/bal-input/test/bal-input-util.spec.ts b/packages/components/src/components/form/bal-input/test/bal-input-util.spec.ts
@@ -28,7 +28,7 @@ describe('bal-input-util testing:', () => {
     })
     test('claim number with a sign postfix correctly X', () => {
       const result = formatClaim('7300772816X')
-      expect(result).toStrictEqual('73/001217/16.X')
+      expect(result).toStrictEqual('73/007728/16.X')
     })
   })
   describe('formatOffer', () => {