Merge pull request #383 from MyPureCloud/feature/COMUI-2616_v2

fix(date-picker): first keypress after focus should be treated as new input
MyPureCloud · Mar 25, 2024 · 0102aa0 · 0102aa0
2 parents 2a94370 + d01a9de
commit 0102aa0
Showing 1 changed file with 12 additions and 2 deletions.
diff --git a/packages/genesys-spark-components/src/components/stable/gux-datepicker/gux-datepicker.tsx b/packages/genesys-spark-components/src/components/stable/gux-datepicker/gux-datepicker.tsx
@@ -158,6 +158,12 @@ export class GuxDatepicker {
   @State()
   active: boolean = false;
 
+  /**
+   * Tracks the amount of key presses when focusing on the input.
+   */
+  @State()
+  pressedKeys: Array<string> = [];
+
   @Watch('value')
   watchValue() {
     this.updateDate();
@@ -240,6 +246,7 @@ export class GuxDatepicker {
           );
           this.setIntervalRange(previousIntervalRange);
           this.setCursorRange();
+          this.pressedKeys.length = 0;
           break;
         }
         case 'ArrowRight': {
@@ -251,6 +258,7 @@ export class GuxDatepicker {
           );
           this.setIntervalRange(nextIntervalRange);
           this.setCursorRange();
+          this.pressedKeys.length = 0;
           break;
         }
         default:
@@ -312,6 +320,7 @@ export class GuxDatepicker {
   @OnClickOutside({ triggerEvents: 'mousedown' })
   onClickOutside() {
     this.active = false;
+    this.pressedKeys.length = 0;
   }
 
   /*********  Event Handlers  **********/
@@ -362,6 +371,7 @@ export class GuxDatepicker {
   }
 
   updateIntervalValue(event: KeyboardEvent): void {
+    this.pressedKeys.push(event.key);
     const inputNumber = parseInt(event.key, 10);
 
     if (!isNaN(inputNumber)) {
@@ -377,7 +387,7 @@ export class GuxDatepicker {
       ) {
         this.typeYearValue(currentSectionValue, event.key);
       } else {
-        if (this.canSetDate(inputNumber)) {
+        if (this.canSetDate(inputNumber) && this.pressedKeys.length >= 2) {
           this.updateSelection(
             this.focusedField,
             `${currentSectionValue[1]}${event.key}`
@@ -479,7 +489,7 @@ export class GuxDatepicker {
     }
   }
 
-  canSetDate(key: number) {
+  canSetDate(key: number): boolean {
     const newValue = parseInt(
       [
         this.focusedField.value[this.intervalRange.selectionEnd - 1].toString(),