From acce2aafe1c30178535d2e0185fb4f3cc63c06dc Mon Sep 17 00:00:00 2001
From: MikeMatusz <Michael.Matuszak@tylertech.com>
Date: Fri, 22 Sep 2023 12:03:20 -0400
Subject: [PATCH] fix(date-picker, time-picker, date-range-picker): select mask
 on focus if shown

---
 .../base/base-date-picker-foundation.ts       |  4 +--
 .../date-range-picker-foundation.ts           |  4 +--
 src/lib/time-picker/time-picker-foundation.ts |  8 +++---
 src/test/spec/date-picker/date-picker.spec.ts | 13 ++++++++++
 .../date-range-picker.spec.ts                 | 26 +++++++++++++++++++
 src/test/spec/time-picker/time-picker.spec.ts | 14 ++++++++++
 6 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/src/lib/date-picker/base/base-date-picker-foundation.ts b/src/lib/date-picker/base/base-date-picker-foundation.ts
index 5091f3498..562bda407 100644
--- a/src/lib/date-picker/base/base-date-picker-foundation.ts
+++ b/src/lib/date-picker/base/base-date-picker-foundation.ts
@@ -167,11 +167,11 @@ export abstract class BaseDatePickerFoundation<TAdapter extends IBaseDatePickerA
   }
 
   protected _onInputFocus(evt: FocusEvent): void {
-    this._adapter.selectInputText();
-
     if (this.masked && this.showMaskFormat) {
       this._applyMask();
     }
+
+    this._adapter.selectInputText();
   }
   
   protected _onInputBlur(evt: FocusEvent): void {
diff --git a/src/lib/date-range-picker/date-range-picker-foundation.ts b/src/lib/date-range-picker/date-range-picker-foundation.ts
index c681b2f5c..6e5bfa309 100644
--- a/src/lib/date-range-picker/date-range-picker-foundation.ts
+++ b/src/lib/date-range-picker/date-range-picker-foundation.ts
@@ -315,11 +315,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation<IDateRan
   }
 
   private _onToInputFocus(): void {
-    this._adapter.selectToInputText();
     if (this.masked && this._showMaskFormat) {
       this._initializeMask();
       this._initializeToMask();
     }
+    this._adapter.selectToInputText();
   }
 
   private _onToInputBlur(evt: FocusEvent): void {
@@ -336,11 +336,11 @@ export class DateRangePickerFoundation extends BaseDatePickerFoundation<IDateRan
   }
 
   protected override _onInputFocus(evt: FocusEvent): void {
-    this._adapter.selectInputText();
     if (this.masked && this._showMaskFormat) {
       this._initializeMask();
       this._initializeToMask();
     }
+    this._adapter.selectInputText();
   }
 
   protected override _onInputBlur(evt: FocusEvent): void {
diff --git a/src/lib/time-picker/time-picker-foundation.ts b/src/lib/time-picker/time-picker-foundation.ts
index 8208713dd..b6257786d 100644
--- a/src/lib/time-picker/time-picker-foundation.ts
+++ b/src/lib/time-picker/time-picker-foundation.ts
@@ -287,13 +287,13 @@ export class TimePickerFoundation implements ITimePickerFoundation {
   }
 
   private _onInputFocus(evt: Event): void {
-    if (this._allowInput) {
-      this._adapter.selectInputText();
-    }
-
     if (this.masked && this._showMaskFormat) {
       this._applyMask();
     }
+
+    if (this._allowInput) {
+      this._adapter.selectInputText();
+    }
   }
 
   private _onInputBlur(evt: Event): void {
diff --git a/src/test/spec/date-picker/date-picker.spec.ts b/src/test/spec/date-picker/date-picker.spec.ts
index 4f5089bfc..7c70e4e34 100644
--- a/src/test/spec/date-picker/date-picker.spec.ts
+++ b/src/test/spec/date-picker/date-picker.spec.ts
@@ -838,6 +838,19 @@ describe('DatePickerComponent', function(this: ITestContext) {
       expect(getInputElement(this.context.component).value).toBe('__/__/____');
     });
 
+    it('should select mask when shown on focus', function(this: ITestContext) {
+      this.context = setupTestContext(true);
+      const inputElement = getInputElement(this.context.component);
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.MASKED, '');
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_MASK_FORMAT, '');
+
+      expect(this.context.component.showMaskFormat).toBe(true);
+      inputElement.focus();
+
+      expect(inputElement.selectionStart).toEqual(0);
+      expect(inputElement.selectionEnd).toEqual('__/__/____'.length);
+    });
+
     it('should clear mask format on blur', function(this: ITestContext) {
       this.context = setupTestContext(true);
       const inputElement = getInputElement(this.context.component);
diff --git a/src/test/spec/date-range-picker/date-range-picker.spec.ts b/src/test/spec/date-range-picker/date-range-picker.spec.ts
index b4279f384..a289ec240 100644
--- a/src/test/spec/date-range-picker/date-range-picker.spec.ts
+++ b/src/test/spec/date-range-picker/date-range-picker.spec.ts
@@ -919,6 +919,32 @@ describe('DateRangePickerComponent', function(this: ITestContext) {
       expect(inputElement.value).toBe('01/01/2020');
     });
 
+    it('should select mask in "from" input when shown on focus', function(this: ITestContext) {
+      this.context = setupTestContext(true);
+      const fromElement = getFromElement(this.context.component);
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.MASKED, '');
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_MASK_FORMAT, '');
+
+      expect(this.context.component.showMaskFormat).toBe(true);
+      fromElement.focus();
+      
+      expect(fromElement.selectionStart).toEqual(0);
+      expect(fromElement.selectionEnd).toEqual('__/__/____'.length);
+    });
+
+    it('should select mask in "to" input when shown on focus', function(this: ITestContext) {
+      this.context = setupTestContext(true);
+      const toElement = getToElement(this.context.component);
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.MASKED, '');
+      this.context.component.setAttribute(BASE_DATE_PICKER_CONSTANTS.observedAttributes.SHOW_MASK_FORMAT, '');
+
+      expect(this.context.component.showMaskFormat).toBe(true);
+      toElement.focus();
+      
+      expect(toElement.selectionStart).toEqual(0);
+      expect(toElement.selectionEnd).toEqual('__/__/____'.length);
+    });
+
     it('should only show mask format in "from" input on focus', function(this: ITestContext) {
       this.context = setupTestContext(true);
       const fromElement = getFromElement(this.context.component);
diff --git a/src/test/spec/time-picker/time-picker.spec.ts b/src/test/spec/time-picker/time-picker.spec.ts
index 2b1c7eccd..743267a4e 100644
--- a/src/test/spec/time-picker/time-picker.spec.ts
+++ b/src/test/spec/time-picker/time-picker.spec.ts
@@ -1047,6 +1047,20 @@ describe('TimePickerComponent', function(this: ITestContext) {
     expect(inputElement.value).toBe('01:01');
   });
 
+  it('should select mask when shown on focus', function(this: ITestContext) {
+    this.context = _createTimePickerContext();
+    const inputElement = this.context.inputElement;
+    this.context.component.setAttribute(TIME_PICKER_CONSTANTS.attributes.MASKED, '');
+    this.context.component.setAttribute(TIME_PICKER_CONSTANTS.attributes.SHOW_MASK_FORMAT, '');
+
+    expect(this.context.component.masked).toBe(true);
+    expect(this.context.component.showMaskFormat).toBe(true);
+    inputElement.focus();
+
+    expect(inputElement.selectionStart).toEqual(0);
+    expect(inputElement.selectionEnd).toEqual('__:__ __'.length);
+  });
+
   it('should only show default mask format on focus', function(this: ITestContext) {
     this.context = _createTimePickerContext();
     const inputElement = this.context.inputElement;