From cd18162836d4e01bd5c1313b4a91e019a9fae92c Mon Sep 17 00:00:00 2001
From: Benjamin Charity <ben@benjamincharity.com>
Date: Thu, 3 Oct 2019 08:53:52 -0400
Subject: [PATCH] fix(SelectionList): first option now selected by default

ISSUES CLOSED: #1729
---
 demo/app/components/components.component.ts   |  2 --
 .../selection-list-trigger.directive.ts       |  7 +++----
 .../src/selection-list.component.spec.ts      | 19 ++++++++++++++++---
 .../testing/src/test-helpers.ts               | 15 +++++++++++++++
 4 files changed, 34 insertions(+), 9 deletions(-)

diff --git a/demo/app/components/components.component.ts b/demo/app/components/components.component.ts
index 1138f9289..37a9c62b6 100644
--- a/demo/app/components/components.component.ts
+++ b/demo/app/components/components.component.ts
@@ -72,7 +72,6 @@ export class ComponentsComponent implements OnInit {
    * Pass the query change to our search
    */
   public queryHasChanged(query: string): void {
-    console.log('queryHasChanged: ', query);
     this.query$.next(query);
   }
 
@@ -104,7 +103,6 @@ export class ComponentsComponent implements OnInit {
    */
   private queryComponents(query: string): Route[] {
     query = query.toLowerCase();
-    console.warn('queryComponents: ', query);
 
     if (query) {
       const letters = query.split('').map(l => `${l}.*`).join('');
diff --git a/terminus-ui/selection-list/src/selection-list-panel/selection-list-trigger.directive.ts b/terminus-ui/selection-list/src/selection-list-panel/selection-list-trigger.directive.ts
index 63fb14232..1fbe8cfa2 100644
--- a/terminus-ui/selection-list/src/selection-list-panel/selection-list-trigger.directive.ts
+++ b/terminus-ui/selection-list/src/selection-list-panel/selection-list-trigger.directive.ts
@@ -770,7 +770,8 @@ export class TsSelectionListTriggerDirective<ValueType = string> implements Cont
         // Create a new stream of panelClosingActions, replacing any previous streams that were created, and flatten it so our stream only
         // emits closing events...
         switchMap(() => {
-          this.resetActiveItem();
+          // Focus the first option when options change
+          this.selectionListPanel.keyManager.setActiveItem(0);
           this.selectionListPanel.setVisibility();
 
           return this.panelClosingActions;
@@ -820,14 +821,12 @@ export class TsSelectionListTriggerDirective<ValueType = string> implements Cont
       // top of the option, because it allows the user to read the top group's label.
       this.selectionListPanel.scrollTop = 0;
     } else {
-      const newScrollPosition = getOptionScrollPosition(
+      this.selectionListPanel.scrollTop = getOptionScrollPosition(
         index + labelCount,
         this.itemHeight,
         this.selectionListPanel.scrollTop,
         SELECTION_LIST_PANEL_MAX_HEIGHT,
       );
-
-      this.selectionListPanel.scrollTop = newScrollPosition;
     }
   }
 
diff --git a/terminus-ui/selection-list/src/selection-list.component.spec.ts b/terminus-ui/selection-list/src/selection-list.component.spec.ts
index 38dee5fd2..22397e40a 100644
--- a/terminus-ui/selection-list/src/selection-list.component.spec.ts
+++ b/terminus-ui/selection-list/src/selection-list.component.spec.ts
@@ -965,11 +965,24 @@ describe(`TsSelectionListComponent`, function() {
     expect(fixture.componentInstance.clicked).toHaveBeenCalled();
   }));
 
+  // Note: Simply dispatching the arrow down key on the trigger repeatedly did not work
+  test.todo(`should update panel scroll position when focusing an out-of-view option`);
 
-  describe(`scroll into view`, () => {
+  test(`should focus first option when the options collection changes`, fakeAsync(() => {
+    const fixture = createComponent(testComponents.Basic);
+    fixture.detectChanges();
+    const instance = getSelectionListInstance(fixture);
 
-    test.todo(`should update panel scroll position when focusing option out of view`);
+    expect(instance.panel.keyManager.activeItemIndex).toEqual(-1);
 
-  });
+    const input = getSelectionListInput(fixture);
+    const states = fixture.componentInstance.states;
+    const name = states[3].name.substring(0, 2);
+    typeInElement(name, input);
+    tick(1000);
+    fixture.detectChanges();
+
+    expect(instance.panel.keyManager.activeItemIndex).toEqual(0);
+  }));
 
 });
diff --git a/terminus-ui/selection-list/testing/src/test-helpers.ts b/terminus-ui/selection-list/testing/src/test-helpers.ts
index 3fc775828..5d1e91213 100644
--- a/terminus-ui/selection-list/testing/src/test-helpers.ts
+++ b/terminus-ui/selection-list/testing/src/test-helpers.ts
@@ -200,3 +200,18 @@ export function getOptgroupElement(fixture: ComponentFixture<any>, selectIndex =
   const group = getOptgroup(fixture, selectIndex, groupIndex);
   return group.elementRef.nativeElement;
 }
+
+/**
+ * Open the panel
+ *
+ * @param fixture - The component fixture
+ * @param index - The index of the desired TsSelectionListComponent
+ * @return The whenStable promise
+ */
+// tslint:disable-next-line no-any
+export function openSelectionList(fixture: ComponentFixture<any>, index = 0): Promise<any> {
+  const trigger = getSelectionListTriggerElement(fixture, index);
+  trigger.click();
+  fixture.detectChanges();
+  return fixture.whenStable();
+}