fix(timepicker): Incorrect clipboard paste logic (#163477) (#60)

positive-js · Oct 29, 2018 · d1857fa · d1857fa
1 parent fb5853a
commit d1857fa
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/src/lib/timepicker/timepicker.spec.ts b/src/lib/timepicker/timepicker.spec.ts
@@ -247,6 +247,26 @@ describe('McTimepicker', () => {
                 });
         });
 
+        it('Paste value from clipboard', () => {
+            return fixture.whenStable()
+                .then(() => {
+                    inputElementDebug.triggerEventHandler(
+                        'paste',
+                        {
+                            preventDefault: () => null,
+                            clipboardData: {
+                                getData: () => '19:01:08'
+                            }
+                        });
+                    fixture.detectChanges();
+
+                    return fixture.whenStable();
+                })
+                .then(() => {
+                    fixture.detectChanges();
+                    expect(testComponent.timeValue.toString()).toContain('19:01:08');
+                });
+        });
     });
 
     describe('Keyboard value control', () => {

diff --git a/src/lib/timepicker/timepicker.ts b/src/lib/timepicker/timepicker.ts
@@ -30,7 +30,8 @@ import {
 
 import { coerceBooleanProperty } from '@ptsecurity/cdk/coercion';
 import {
-    CanUpdateErrorState, CanUpdateErrorStateCtor,
+    CanUpdateErrorState,
+    CanUpdateErrorStateCtor,
     ErrorStateMatcher,
     mixinErrorState
 } from '@ptsecurity/mosaic/core';
@@ -91,6 +92,7 @@ export const McTimepickerMixinBase:
         '(blur)': 'onBlur()',
         '(focus)': 'focusChanged(true)',
         '(input)': 'onInput()',
+        '(paste)': 'onPaste($event)',
         '(keydown)': 'onKeyDown($event)'
     },
     providers: [
@@ -306,6 +308,16 @@ export class McTimepicker extends McTimepickerMixinBase
         this.focusChanged(false);
     }
 
+    onPaste($event) {
+        $event.preventDefault();
+        const clipboardUserInput: string = $event.clipboardData.getData('text');
+
+        if (this._getDateFromTimeString(clipboardUserInput) === undefined) { return; }
+
+        this._elementRef.nativeElement.value = clipboardUserInput;
+        this.onInput();
+    }
+
     onInput() {
         const initialCursorStart: number = this._elementRef.nativeElement.selectionStart;
         const initialCursorEnd: number = this._elementRef.nativeElement.selectionEnd;