fix(selection-list): restore focus if active item is destroyed

* Removes the `destroyed` and `onFocus` observables and instead just calls methods on the injected `MdSelectionList` instance.

* Fixes that the active item is not updating if the active item is being destroyed.

Author: devversion

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

@@ -30,10 +30,11 @@ describe('MdSelectionList', () => {
 
     beforeEach(async(() => {
       fixture = TestBed.createComponent(SelectionListWithListOptions);
+      fixture.detectChanges();
+
       listOption = fixture.debugElement.queryAll(By.directive(MdListOption));
       listItemEl = fixture.debugElement.query(By.css('.mat-list-item'));
       selectionList = fixture.debugElement.query(By.directive(MdSelectionList));
-      fixture.detectChanges();
     }));
 
     it('should add and remove focus class on focus/blur', () => {
@@ -152,6 +153,21 @@ describe('MdSelectionList', () => {
       expect(selectList.selected.length).toBe(1);
     });
 
+    it('should restore focus if active option is destroyed', () => {
+      const manager = selectionList.componentInstance._keyManager;
+
+      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 =
@@ -398,11 +414,12 @@ describe('MdSelectionList', () => {
     <md-list-option checkboxPosition="before" value="sent-mail">
       Sent Mail
     </md-list-option>
-    <md-list-option checkboxPosition="before" value="drafts">
+    <md-list-option checkboxPosition="before" value="drafts" *ngIf="showLastOption">
       Drafts
     </md-list-option>
   </mat-selection-list>`})
 class SelectionListWithListOptions {
+  showLastOption: boolean = true;
 }
 
 @Component({template: `

src/lib/list/selection-list.ts

@@ -35,13 +35,8 @@ import {
   MdLineSetter,
   mixinDisabled,
   mixinDisableRipple,
-  RxChain,
   SPACE,
-  startWith,
-  switchMap,
 } from '@angular/material/core';
-import {merge} from 'rxjs/observable/merge';
-import {Subscription} from 'rxjs/Subscription';
 
 
 /** @docs-private */
@@ -57,8 +52,6 @@ export interface MdSelectionListOptionEvent {
   option: MdListOption;
 }
 
-const FOCUSED_STYLE: string = 'mat-list-item-focus';
-
 /**
  * Component for list-options of selection-list. Each list-option can automatically
  * generate a checkbox and can put current item into the selectionModel of selection-list
@@ -76,6 +69,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
     '(click)': '_handleClick()',
     'tabindex': '-1',
     '[class.mat-list-item-disabled]': 'disabled',
+    '[class.mat-list-item-focus]': '_hasFocus',
     '[attr.aria-selected]': 'selected.toString()',
     '[attr.aria-disabled]': 'disabled.toString()',
   },
@@ -112,18 +106,12 @@ export class MdListOption extends _MdListOptionMixinBase
   get selected() { return this._selected; }
   set selected(value: boolean) { this._selected = coerceBooleanProperty(value); }
 
-  /** Emitted when the option is focused. */
-  onFocus = new EventEmitter<MdSelectionListOptionEvent>();
-
   /** Emitted when the option is selected. */
   @Output() selectChange = new EventEmitter<MdSelectionListOptionEvent>();
 
   /** Emitted when the option is deselected. */
   @Output() deselected = new EventEmitter<MdSelectionListOptionEvent>();
-
-  /** Emitted when the option is destroyed. */
-  @Output() destroyed = new EventEmitter<MdSelectionListOptionEvent>();
-
+  
   constructor(private _renderer: Renderer2,
               private _element: ElementRef,
               private _changeDetector: ChangeDetectorRef,
@@ -141,7 +129,7 @@ export class MdListOption extends _MdListOptionMixinBase
   }
 
   ngOnDestroy(): void {
-    this.destroyed.emit({option: this});
+    this.selectionList._removeOptionFromList(this);
   }
 
   /** Toggles the selection state of the option. */
@@ -154,7 +142,6 @@ export class MdListOption extends _MdListOptionMixinBase
   /** Allows for programmatic focusing of the option. */
   focus(): void {
     this._element.nativeElement.focus();
-    this.onFocus.emit({option: this});
   }
 
   /** Whether this list item should show a ripple effect when clicked.  */
@@ -170,11 +157,11 @@ export class MdListOption extends _MdListOptionMixinBase
 
   _handleFocus() {
     this._hasFocus = true;
-    this._renderer.addClass(this._element.nativeElement, FOCUSED_STYLE);
+    this.selectionList._setFocusedOption(this);
   }
 
   _handleBlur() {
-    this._renderer.removeClass(this._element.nativeElement, FOCUSED_STYLE);
+    this._hasFocus = false;
   }
 
   /** Retrieves the DOM element of the component host. */
@@ -204,17 +191,11 @@ export class MdListOption extends _MdListOptionMixinBase
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class MdSelectionList extends _MdSelectionListMixinBase
-    implements FocusableOption, CanDisable, CanDisableRipple, AfterContentInit, OnDestroy {
+    implements FocusableOption, CanDisable, CanDisableRipple, AfterContentInit {
 
   /** Tab index for the selection-list. */
   _tabIndex = 0;
 
-  /** Subscription to all list options' onFocus events */
-  private _optionFocusSubscription = Subscription.EMPTY;
-
-  /** Subscription to all list options' destroy events  */
-  private _optionDestroyStream = Subscription.EMPTY;
-
   /** The FocusKeyManager which handles focus. */
   _keyManager: FocusKeyManager<MdListOption>;
 
@@ -234,14 +215,6 @@ export class MdSelectionList extends _MdSelectionListMixinBase
     if (this.disabled) {
       this._tabIndex = -1;
     }
-
-    this._optionFocusSubscription = this._onFocusSubscription();
-    this._optionDestroyStream = this._onDestroySubscription();
-  }
-
-  ngOnDestroy(): void {
-    this._optionDestroyStream.unsubscribe();
-    this._optionFocusSubscription.unsubscribe();
   }
 
   /** Focus the selection-list. */
@@ -267,36 +240,23 @@ export class MdSelectionList extends _MdSelectionListMixinBase
     });
   }
 
-  /** Map all the options' destroy event subscriptions and merge them into one stream. */
-  private _onDestroySubscription(): Subscription {
-    return RxChain.from(this.options.changes)
-      .call(startWith, this.options)
-      .call(switchMap, (options: MdListOption[]) => {
-        return merge(...options.map(option => option.destroyed));
-      }).subscribe((e: MdSelectionListOptionEvent) => {
-        let optionIndex: number = this.options.toArray().indexOf(e.option);
-        if (e.option._hasFocus) {
-          // Check whether the option is the last item
-          if (optionIndex < this.options.length - 1) {
-            this._keyManager.setActiveItem(optionIndex);
-          } else if (optionIndex - 1 >= 0) {
-            this._keyManager.setActiveItem(optionIndex - 1);
-          }
-        }
-        e.option.destroyed.unsubscribe();
-      });
+  /** Sets the focused option of the selection-list. */
+  _setFocusedOption(option: MdListOption) {
+    this._keyManager.updateActiveItemIndex(this._getIndexFromOption(option));
   }
 
-  /** Map all the options' onFocus event subscriptions and merge them into one stream. */
-  private _onFocusSubscription(): Subscription {
-    return RxChain.from(this.options.changes)
-      .call(startWith, this.options)
-      .call(switchMap, (options: MdListOption[]) => {
-        return merge(...options.map(option => option.onFocus));
-      }).subscribe((e: MdSelectionListOptionEvent) => {
-      let optionIndex: number = this.options.toArray().indexOf(e.option);
-      this._keyManager.updateActiveItemIndex(optionIndex);
-    });
+  /** Removes an option from the selection list and updates the active item. */
+  _removeOptionFromList(option: MdListOption) {
+    if (option._hasFocus) {
+      const optionIndex = this._getIndexFromOption(option);
+
+      // Check whether the option is the last item
+      if (optionIndex - 1 >= 0) {
+        this._keyManager.setPreviousItemActive();
+      } else if (optionIndex < this.options.length - 1) {
+        this._keyManager.setNextItemActive();
+      }
+    }
   }
 
   /** Passes relevant key presses to our key manager. */
@@ -334,4 +294,9 @@ export class MdSelectionList extends _MdSelectionListMixinBase
   private _isValidIndex(index: number): boolean {
     return index >= 0 && index < this.options.length;
   }
+
+  /** Returns the index of the specified list option. */
+  private _getIndexFromOption(option: MdListOption): number {
+    return this.options.toArray().indexOf(option);
+  }
 }