fix: COM-232 datetime safari cursor jump issue of death

entrecode · Mar 8, 2019 · 0777809 · 0777809
1 parent ac4aec3
commit 0777809
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/packages/calendar/src/lib/calendar/calendar.component.ts b/packages/calendar/src/lib/calendar/calendar.component.ts
@@ -24,8 +24,10 @@ export class CalendarComponent extends MonthComponent implements ControlValueAcc
   @Output() changed: EventEmitter<any> = new EventEmitter();
   /** The form control that holds the date */
   @Input() formControl: FormControl;
-  /** The current value of the input */
+  /** The current value */
   value = '';
+  /** The current value of the input */
+  inputValue = '';
   /** The calendar view child. */
   @ViewChild(MonthComponent) grid: MonthComponent;
   /** Array of the days of a week. */
@@ -78,6 +80,7 @@ export class CalendarComponent extends MonthComponent implements ControlValueAcc
       selected.minute(previous.minute());
     }
     this.value = selected.format(this.getPattern(selected));
+    this.inputValue = this.value;
     this.setValue(selected.toISOString() || 'invalid');
   }
 
@@ -86,7 +89,8 @@ export class CalendarComponent extends MonthComponent implements ControlValueAcc
     this.value = value;
     const typed = moment(value, this.patterns, true);
     if (typed.isValid()) {
-      this.grid.selectDay(typed);
+      this.grid.selectDay(typed, false);
+      this.setValue(typed.toISOString());
     } else if (value === '') {
       this.grid.clearSelection();
       this.setValue(null);
@@ -112,6 +116,7 @@ export class CalendarComponent extends MonthComponent implements ControlValueAcc
       return;
     }
     this.value = date.format(this.patterns[0]) || '';
+    this.inputValue = this.value;
     this.grid.selectDay(moment(value));
   }
 

diff --git a/packages/calendar/src/lib/calendar/month.component.ts b/packages/calendar/src/lib/calendar/month.component.ts
@@ -189,10 +189,12 @@ export class MonthComponent implements OnInit, OnChanges {
   }
 
   /** Selects the day of the given moment. */
-  selectDay(_moment: moment.Moment): void {
+  selectDay(_moment: moment.Moment, emit = true): void {
     this.setDate(_moment);
     this.selected = _moment;
-    this.dayClicked.emit(_moment);
+    if (emit) {
+      this.dayClicked.emit(_moment);
+    }
   }
 
   /** Clears the current selected date*/

diff --git a/packages/ui/src/lib/form/datetime/datetime.component.html b/packages/ui/src/lib/form/datetime/datetime.component.html
@@ -1,7 +1,7 @@
 <div class="ec-datetime-picker">
     <div class="input-group">
-        <input class="input" [value]="calendar.value" (input)="calendar.input($event.target.value)" (focus)="calendarPop.show()"
-            (blur)="calendarPop.hide()" [placeholder]="placeholder">
+        <input class="input" [value]="calendar.inputValue" (input)="calendar.input($event.target.value)"
+            (focus)="calendarPop.show()" (blur)="calendarPop.hide()" [placeholder]="placeholder">
         <div class="input-group__addon">
             <a (click)="calendarPop.toggle()">
                 <ec-icon name="calendar"></ec-icon>