fix(date-picker, time-picker, date-range-picker): select mask on focu…

…s if shown
tyler-technologies-oss · Sep 22, 2023 · acce2aa · acce2aa
1 parent 32917ca
commit acce2aa
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;