🐛 fix(bal-date): Tabnavigation get stuck in the date input (#1171)

* Create PR for #1167 * fix(input-date): tab navigation --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]>
baloise · Dec 4, 2023 · 185f6ca · 185f6ca
1 parent cc142d9
commit 185f6ca
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/cuddly-deers-boil.md b/.changeset/cuddly-deers-boil.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+Fix tab navigation functionality for the `bal-input-date` component when a value is set.
diff --git a/packages/components/src/utils/mask/context/mask-keyboard-context.ts b/packages/components/src/utils/mask/context/mask-keyboard-context.ts
@@ -36,6 +36,10 @@ export class MaskKeyboardContext extends MaskContext<MaskKeyboardContextEvent> {
     return this._options.event.key === 'Backspace'
   }
 
+  get isTabKey() {
+    return this._options.event.key === 'Tab'
+  }
+
   get isWhiteSpaceKey() {
     return this._options.event.key === ' '
   }

diff --git a/packages/components/src/utils/mask/mask.ts b/packages/components/src/utils/mask/mask.ts
@@ -277,7 +277,9 @@ export abstract class AbstractMask implements Mask {
       //
       // hit a range of chars
     } else {
-      context.preventDefault()
+      if (!context.isTabKey) {
+        context.preventDefault()
+      }
 
       if (context.isBackspaceKey || context.isDeleteKey) {
         this.resetInputValueWithMask(context)