From 1469c7fa8d56bfa897efaa3b2102378592458fab Mon Sep 17 00:00:00 2001
From: "BLACKBAUD\\Trevor.Burch" <Trevor.Burch@blackbaud.com>
Date: Wed, 22 Aug 2018 11:36:32 -0400
Subject: [PATCH] Worked on verifying required error states for lookup and
 autocomplete components

---
 .../autocomplete-input.directive.ts            | 18 ++++++++++--------
 .../autocomplete.component.spec.ts             |  4 ++--
 src/modules/lookup/lookup.component.scss       |  4 ++++
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/modules/autocomplete/autocomplete-input.directive.ts b/src/modules/autocomplete/autocomplete-input.directive.ts
index 32343114a..fed2593bf 100644
--- a/src/modules/autocomplete/autocomplete-input.directive.ts
+++ b/src/modules/autocomplete/autocomplete-input.directive.ts
@@ -42,16 +42,16 @@ export class SkyAutocompleteInputDirective
 
   public set displayWith(value: string) {
     this._displayWith = value;
-    this.textValue = this.value[this.displayWith];
+    this.updateTextValue();
   }
 
   public get value() {
-    return this._value || { };
+    return this._value;
   }
 
   public set value(value: any) {
     this._value = value;
-    this.textValue = this.value[this.displayWith];
+    this.updateTextValue();
     this.onChange(this.value);
     this.onTouched();
   }
@@ -100,9 +100,7 @@ export class SkyAutocompleteInputDirective
   }
 
   public writeValue(value: any): void {
-    if (value) {
-      this.value = value;
-    }
+    this.value = value;
   }
 
   public registerOnChange(fn: (value: any) => void): void {
@@ -129,7 +127,7 @@ export class SkyAutocompleteInputDirective
 
   private checkValues(): void {
     const text = this.elementRef.nativeElement.value;
-    const displayValue = this.value[this.displayWith];
+    const displayValue = this.value ? this.value[this.displayWith] : undefined;
 
     // If the search field contains text, make sure that the value
     // matches the selected descriptor key.
@@ -140,9 +138,13 @@ export class SkyAutocompleteInputDirective
     } else {
       // The search field is empty (or doesn't have a selected item),
       // so clear out the selected value.
-      this.value = { };
+      this.value = undefined;
     }
 
     this.blur.emit();
   }
+
+  private updateTextValue() {
+    this.textValue = this.value ? this.value[this.displayWith] : undefined;
+  }
 }
diff --git a/src/modules/autocomplete/autocomplete.component.spec.ts b/src/modules/autocomplete/autocomplete.component.spec.ts
index e42232dd3..76cb428c5 100644
--- a/src/modules/autocomplete/autocomplete.component.spec.ts
+++ b/src/modules/autocomplete/autocomplete.component.spec.ts
@@ -585,8 +585,8 @@ describe('Autocomplete component', () => {
         SkyAppTestUtility.fireDomEvent(inputElement, 'blur');
         tick();
 
-        expect(component.myForm.value.favoriteColor).toEqual({ });
-        expect(input.value).toEqual({ });
+        expect(component.myForm.value.favoriteColor).toBeUndefined();
+        expect(input.value).toBeUndefined();
         expect(inputElement.value).toEqual('');
       })
     );
diff --git a/src/modules/lookup/lookup.component.scss b/src/modules/lookup/lookup.component.scss
index 76b2d7305..67898069d 100644
--- a/src/modules/lookup/lookup.component.scss
+++ b/src/modules/lookup/lookup.component.scss
@@ -58,3 +58,7 @@
     flex-basis: 100px;
   }
 }
+
+:host(.ng-invalid.ng-touched) .sky-lookup-search {
+  @include sky-field-status(invalid);
+}