Merge pull request #41 from hmcts/RDM-2468

RDM-2468: Date field error correction
hmcts · Aug 31, 2018 · ecbd269 · ecbd269
2 parents 0db9f90 + e4c5043
commit ecbd269
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md
@@ -1,5 +1,9 @@
 ## RELEASE NOTES
 
+### Version 1.2.4 - August 31 2018
+**RDM-2468** Bug:
+- Date field error correction
+
 ### Version 1.2.3 - August 24 2018
 - New publishing key
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hmcts/ccd-case-ui-toolkit",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Case UI Toolkit",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",

diff --git a/src/components/form/date-input/date-input.component.ts b/src/components/form/date-input/date-input.component.ts
@@ -31,6 +31,7 @@ export class DateInputComponent implements ControlValueAccessor, Validator, OnIn
   @Input()
   public formControl: FormControl;
 
+  public isTouched: boolean = false;
   public displayDay: string = null;
   public displayMonth: string = null;
   public displayYear: string = null;
@@ -173,9 +174,23 @@ export class DateInputComponent implements ControlValueAccessor, Validator, OnIn
     this.propagateChange(this.rawValue);
   }
 
+  public inputFocus() {
+    this.isTouched = false;
+    this.touch();
+  }
+
   public inputBlur() {
-    this.formControl.markAsTouched();
-    this.propagateChange(this.rawValue);
+    this.isTouched = true;
+    this.touch();
+  }
+
+  public touch() {
+    if (this.isTouched) {
+      this.formControl.markAsTouched();
+      this.propagateChange(this.rawValue);
+    } else {
+      this.formControl.markAsUntouched();
+    }
   }
 
   public dayId() {

diff --git a/src/components/form/date-input/date-input.html b/src/components/form/date-input/date-input.html
@@ -10,7 +10,8 @@
            [value]="displayDay"
            (change)="dayChange(dayInput.value)"
            (keyup)="dayChange(dayInput.value)"
-           (blur)="inputBlur()">
+           (blur)="inputBlur()"
+           (focus)="inputFocus()">
   </div>
 
   <div class="form-group form-group-month">
@@ -23,7 +24,8 @@
            [value]="displayMonth"
            (change)="monthChange(monthInput.value)"
            (keyup)="monthChange(monthInput.value)"
-           (blur)="inputBlur()">
+           (blur)="inputBlur()"
+           (focus)="inputFocus()">
   </div>
 
   <div class="form-group form-group-year">
@@ -36,7 +38,8 @@
            [value]="displayYear"
            (change)="yearChange(yearInput.value)"
            (keyup)="yearChange(yearInput.value)"
-           (blur)="inputBlur()">
+           (blur)="inputBlur()"
+           (focus)="inputFocus()">
   </div>
 
   <div class="form-group form-group-hour" *ngIf="isDateTime">
@@ -49,7 +52,8 @@
            [value]="displayHour"
            (change)="hourChange(hourInput.value)"
            (keyup)="hourChange(hourInput.value)"
-           (blur)="inputBlur()">
+           (blur)="inputBlur()"
+           (focus)="inputFocus()">
   </div>
 
   <div class="form-group form-group-minute" *ngIf="isDateTime">
@@ -62,7 +66,8 @@
            [value]="displayMinute"
            (change)="minuteChange(minuteInput.value)"
            (keyup)="minuteChange(minuteInput.value)"
-           (blur)="inputBlur()">
+           (blur)="inputBlur()"
+           (focus)="inputFocus()">
   </div>
 
   <div class="form-group form-group-second" *ngIf="isDateTime">
@@ -75,7 +80,8 @@
            [value]="displaySecond"
            (change)="secondChange(secondInput.value)"
            (keyup)="secondChange(secondInput.value)"
-           (blur)="inputBlur()">
+           (blur)="inputBlur()"
+           (focus)="inputFocus()">
   </div>
 
 </div>