fix(SelectionList): first option now selected by default

ISSUES CLOSED: #1729

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('');

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;
     }
   }
 

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);
+  }));
 
 });

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();
+}