LP1831390: Fixing implementation of registerOnTouch
authorJane Sandberg <sandbej@linnbenton.edu>
Mon, 8 Jul 2019 13:44:53 +0000 (06:44 -0700)
committerGalen Charlton <gmc@equinoxinitiative.org>
Thu, 1 Aug 2019 14:02:50 +0000 (10:02 -0400)
This commit ensures that the onTouch callback is called on the blur
event, per the official Angular documentation.

Also improves the display of default values in the datepicker

Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
Open-ILS/src/eg2/src/app/share/date-select/date-select.component.html
Open-ILS/src/eg2/src/app/share/date-select/date-select.component.ts

index 9277bb0..2139e5b 100644 (file)
@@ -107,8 +107,9 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit {
     // and display.  Default version trims leading/trailing spaces.
     formatDisplayString: (e: ComboboxEntry) => string;
 
     // and display.  Default version trims leading/trailing spaces.
     formatDisplayString: (e: ComboboxEntry) => string;
 
-    // Stub function required by ControlValueAccessor
+    // Stub functions required by ControlValueAccessor
     propagateChange = (_: any) => {};
     propagateChange = (_: any) => {};
+    propagateTouch = () => {};
 
     constructor(
       private elm: ElementRef,
 
     constructor(
       private elm: ElementRef,
@@ -155,14 +156,12 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit {
     }
 
     onClick($event) {
     }
 
     onClick($event) {
-        this.registerOnTouched();
         this.click$.next($event.target.value);
     }
 
     openMe($event) {
         // Give the input a chance to focus then fire the click
         // handler to force open the typeahead
         this.click$.next($event.target.value);
     }
 
     openMe($event) {
         // Give the input a chance to focus then fire the click
         // handler to force open the typeahead
-        this.registerOnTouched();
         this.elm.nativeElement.getElementsByTagName('input')[0].focus();
         setTimeout(() => this.click$.next(''));
     }
         this.elm.nativeElement.getElementsByTagName('input')[0].focus();
         setTimeout(() => this.click$.next(''));
     }
@@ -232,6 +231,7 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit {
             this.selectorChanged(
                 {item: this.selected, preventDefault: () => true});
         }
             this.selectorChanged(
                 {item: this.selected, preventDefault: () => true});
         }
+        this.propagateTouch();
     }
 
     // Fired by the typeahead to inform us of a change.
     }
 
     // Fired by the typeahead to inform us of a change.
@@ -313,7 +313,9 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit {
         this.propagateChange = fn;
     }
 
         this.propagateChange = fn;
     }
 
-    registerOnTouched() { }
+    registerOnTouched(fn) {
+        this.propagateTouch = fn;
+    }
 
 }
 
 
 }
 
index 0ff4831..80f0188 100644 (file)
@@ -15,6 +15,7 @@
       name="{{fieldName}}"
       [disabled]="disabled"
       [required]="required"
       name="{{fieldName}}"
       [disabled]="disabled"
       [required]="required"
+      (blur)="propagateTouch()"
       [(ngModel)]="current"
       (keyup.enter)="onDateEnter()"
       (dateSelect)="onDateSelect($event)"/>
       [(ngModel)]="current"
       (keyup.enter)="onDateEnter()"
       (dateSelect)="onDateSelect($event)"/>
index ec35601..66d363a 100644 (file)
@@ -58,8 +58,9 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor {
         return date;
     }
 
         return date;
     }
 
-    // Stub function required by ControlValueAccessor
+    // Stub functions required by ControlValueAccessor
     propagateChange = (_: any) => {};
     propagateChange = (_: any) => {};
+    propagateTouch = () => {};
 
     constructor() {
         this.onChangeAsDate = new EventEmitter<Date>();
 
     constructor() {
         this.onChangeAsDate = new EventEmitter<Date>();
@@ -78,11 +79,7 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor {
         }
 
         if (this.initialDate) {
         }
 
         if (this.initialDate) {
-            this.current = {
-                year: this.initialDate.getFullYear(),
-                month: this.initialDate.getMonth() + 1,
-                day: this.initialDate.getDate()
-            };
+            this.writeValue(this.initialDate);
         }
     }
 
         }
     }
 
@@ -126,8 +123,12 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor {
     }
 
     writeValue(value: Date) {
     }
 
     writeValue(value: Date) {
-        if (value !== undefined) {
-            this.initialDate = value;
+        if (value) {
+            this.current = {
+                year: value.getFullYear(),
+                month: value.getMonth() + 1,
+                day: value.getDate()
+            };
         }
     }
 
         }
     }
 
@@ -135,7 +136,9 @@ export class DateSelectComponent implements OnInit, ControlValueAccessor {
         this.propagateChange = fn;
     }
 
         this.propagateChange = fn;
     }
 
-    registerOnTouched() { }
+    registerOnTouched(fn) {
+        this.propagateTouch = fn;
+    }
 }
 
 
 }