Address feedback

Author: devversion

src/lib/list/selection-list.spec.ts

@@ -2,7 +2,7 @@ import {async, TestBed, ComponentFixture, inject} from '@angular/core/testing';
 import {Component, DebugElement} from '@angular/core';
 import {By} from '@angular/platform-browser';
 import {MdSelectionList, MdListOption, MdListModule} from './index';
-import {createKeyboardEvent} from '@angular/cdk/testing';
+import {createKeyboardEvent, dispatchFakeEvent} from '@angular/cdk/testing';
 import {UP_ARROW, DOWN_ARROW, SPACE} from '@angular/material/core';
 import {Platform} from '@angular/material/core';
 
@@ -40,11 +40,11 @@ describe('MdSelectionList', () => {
     it('should add and remove focus class on focus/blur', () => {
       expect(listItemEl.nativeElement.classList).not.toContain('mat-list-item-focus');
 
-      listOption[0].componentInstance._handleFocus();
+      dispatchFakeEvent(listOption[0].nativeElement, 'focus');
       fixture.detectChanges();
       expect(listItemEl.nativeElement.className).toContain('mat-list-item-focus');
 
-      listOption[0].componentInstance._handleBlur();
+      dispatchFakeEvent(listOption[0].nativeElement, 'blur');
       fixture.detectChanges();
       expect(listItemEl.nativeElement.className).not.toContain('mat-list-item-focus');
     });
@@ -140,12 +140,9 @@ describe('MdSelectionList', () => {
       let SPACE_EVENT: KeyboardEvent =
         createKeyboardEvent('keydown', SPACE, testListItem);
       let selectList = selectionList.injector.get<MdSelectionList>(MdSelectionList).selectedOptions;
-      let options = selectionList.componentInstance.options;
-      let array = options.toArray();
-      let focusItem = array[1];
       expect(selectList.selected.length).toBe(0);
 
-      focusItem.focus();
+      dispatchFakeEvent(listOption[0].nativeElement, 'focus');
       selectionList.componentInstance._keydown(SPACE_EVENT);
 
       fixture.detectChanges();
@@ -159,25 +156,20 @@ describe('MdSelectionList', () => {
       listOption[3].componentInstance._handleFocus();
 
       expect(manager.activeItemIndex).toBe(3);
-      expect(listOption[3].componentInstance._hasFocus).toBe(true);
 
       fixture.componentInstance.showLastOption = false;
       fixture.detectChanges();
 
       expect(manager.activeItemIndex).toBe(2);
-      expect(listOption[2].componentInstance._hasFocus).toBe(true);
     });
 
     it('should focus previous item when press UP ARROW', () => {
       let testListItem = listOption[2].nativeElement as HTMLElement;
       let UP_EVENT: KeyboardEvent =
         createKeyboardEvent('keydown', UP_ARROW, testListItem);
-      let options = selectionList.componentInstance.options;
-      let array = options.toArray();
-      let focusItem = array[2];
       let manager = selectionList.componentInstance._keyManager;
 
-      focusItem.focus();
+      dispatchFakeEvent(listOption[2].nativeElement, 'focus');
       expect(manager.activeItemIndex).toEqual(2);
 
       selectionList.componentInstance._keydown(UP_EVENT);
@@ -191,12 +183,9 @@ describe('MdSelectionList', () => {
       let testListItem = listOption[2].nativeElement as HTMLElement;
       let DOWN_EVENT: KeyboardEvent =
         createKeyboardEvent('keydown', DOWN_ARROW, testListItem);
-      let options = selectionList.componentInstance.options;
-      let array = options.toArray();
-      let focusItem = array[2];
       let manager = selectionList.componentInstance._keyManager;
 
-      focusItem.focus();
+      dispatchFakeEvent(listOption[2].nativeElement, 'focus');
       expect(manager.activeItemIndex).toEqual(2);
 
       selectionList.componentInstance._keydown(DOWN_EVENT);

src/lib/list/selection-list.ts

@@ -65,7 +65,7 @@ export interface MdSelectionListOptionEvent {
     'role': 'option',
     'class': 'mat-list-item mat-list-option',
     '(focus)': '_handleFocus()',
-    '(blur)': '_handleBlur()',
+    '(blur)': '_hasFocus = false',
     '(click)': '_handleClick()',
     'tabindex': '-1',
     '[class.mat-list-item-disabled]': 'disabled',
@@ -111,7 +111,7 @@ export class MdListOption extends _MdListOptionMixinBase
 
   /** Emitted when the option is deselected. */
   @Output() deselected = new EventEmitter<MdSelectionListOptionEvent>();
-  
+
   constructor(private _renderer: Renderer2,
               private _element: ElementRef,
               private _changeDetector: ChangeDetectorRef,
@@ -160,10 +160,6 @@ export class MdListOption extends _MdListOptionMixinBase
     this.selectionList._setFocusedOption(this);
   }
 
-  _handleBlur() {
-    this._hasFocus = false;
-  }
-
   /** Retrieves the DOM element of the component host. */
   _getHostElement(): HTMLElement {
     return this._element.nativeElement;
@@ -242,18 +238,18 @@ export class MdSelectionList extends _MdSelectionListMixinBase
 
   /** Sets the focused option of the selection-list. */
   _setFocusedOption(option: MdListOption) {
-    this._keyManager.updateActiveItemIndex(this._getIndexFromOption(option));
+    this._keyManager.updateActiveItemIndex(this._getOptionIndex(option));
   }
 
   /** Removes an option from the selection list and updates the active item. */
   _removeOptionFromList(option: MdListOption) {
     if (option._hasFocus) {
-      const optionIndex = this._getIndexFromOption(option);
+      const optionIndex = this._getOptionIndex(option);
 
       // Check whether the option is the last item
-      if (optionIndex - 1 >= 0) {
+      if (optionIndex  > 0) {
         this._keyManager.setPreviousItemActive();
-      } else if (optionIndex < this.options.length - 1) {
+      } else if (optionIndex === 0 && this.options.length > 1) {
         this._keyManager.setNextItemActive();
       }
     }
@@ -296,7 +292,7 @@ export class MdSelectionList extends _MdSelectionListMixinBase
   }
 
   /** Returns the index of the specified list option. */
-  private _getIndexFromOption(option: MdListOption): number {
+  private _getOptionIndex(option: MdListOption): number {
     return this.options.toArray().indexOf(option);
   }
 }