feat(autocomplete): add value support

Author: kara

src/demo-app/autocomplete/autocomplete-demo.html

@@ -1,9 +1,52 @@
 <div class="demo-autocomplete">
-  <md-input-container>
-    <input mdInput placeholder="State" [mdAutocomplete]="auto">
-  </md-input-container>
+  <md-card>
+    <div>Reactive value: {{ stateCtrl.value }}</div>
+    <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
-  <md-autocomplete #auto="mdAutocomplete">
-    <md-option *ngFor="let state of states" [value]="state.code"> {{ state.name }} </md-option>
-  </md-autocomplete>
+    <md-input-container>
+      <input mdInput placeholder="State" [mdAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
+    </md-input-container>
+
+    <md-card-actions>
+      <button md-button (click)="stateCtrl.reset()">RESET</button>
+      <button md-button (click)="stateCtrl.setValue('California')">SET VALUE</button>
+      <button md-button (click)="stateCtrl.enabled ? stateCtrl.disable() : stateCtrl.enable()">
+        TOGGLE DISABLED
+      </button>
+    </md-card-actions>
+
+  </md-card>
+
+  <md-card>
+    <div>TD value (currentState): {{ currentState }}</div>
+    <div>TD dirty: {{ modelDir.dirty }}</div>
+
+    <md-input-container>
+      <input mdInput placeholder="State" [mdAutocomplete]="tdAuto" [(ngModel)]="currentState" #modelDir="ngModel"
+        (ngModelChange)="this.tdStates = filterStates(currentState)" [disabled]="tdDisabled">
+    </md-input-container>
+
+    <md-card-actions>
+      <button md-button (click)="modelDir.reset()">RESET</button>
+      <button md-button (click)="currentState='California'">SET VALUE</button>
+      <button md-button (click)="tdDisabled=!tdDisabled">
+        TOGGLE DISABLED
+      </button>
+    </md-card-actions>
+
+  </md-card>
 </div>
+
+<md-autocomplete #reactiveAuto="mdAutocomplete">
+  <md-option *ngFor="let state of reactiveStates" [value]="state.name">
+    <span>{{ state.name }}</span>
+    <span class="demo-secondary-text"> ({{state.code}}) </span>
+  </md-option>
+</md-autocomplete>
+
+<md-autocomplete #tdAuto="mdAutocomplete">
+  <md-option *ngFor="let state of tdStates" [value]="state.name">
+    <span>{{ state.name }}</span>
+    <span class="demo-secondary-text"> ({{state.code}}) </span>
+  </md-option>
+</md-autocomplete>

src/demo-app/autocomplete/autocomplete-demo.scss

@@ -1 +1,18 @@
-.demo-autocomplete {}
+.demo-autocomplete {
+  display: flex;
+  flex-flow: row wrap;
+
+  md-card {
+    width: 350px;
+    margin: 24px;
+  }
+
+  md-input-container {
+    margin-top: 16px;
+  }
+}
+
+.demo-secondary-text {
+  color: rgba(0, 0, 0, 0.54);
+  margin-left: 8px;
+}

src/demo-app/autocomplete/autocomplete-demo.ts

@@ -1,12 +1,24 @@
-import {Component} from '@angular/core';
+import {Component, OnDestroy, ViewEncapsulation} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {Subscription} from 'rxjs/Subscription';
 
 @Component({
   moduleId: module.id,
   selector: 'autocomplete-demo',
   templateUrl: 'autocomplete-demo.html',
   styleUrls: ['autocomplete-demo.css'],
+  encapsulation: ViewEncapsulation.None
 })
-export class AutocompleteDemo {
+export class AutocompleteDemo implements OnDestroy {
+  stateCtrl = new FormControl();
+  currentState = '';
+
+  reactiveStates: any[];
+  tdStates: any[];
+
+  reactiveValueSub: Subscription;
+  tdDisabled = false;
+
   states = [
     {code: 'AL', name: 'Alabama'},
     {code: 'AZ', name: 'Arizona'},
@@ -35,4 +47,21 @@ export class AutocompleteDemo {
     {code: 'WI', name: 'Wisconsin'},
     {code: 'WY', name: 'Wyoming'},
   ];
+
+  constructor() {
+    this.reactiveStates = this.states;
+    this.tdStates = this.states;
+    this.reactiveValueSub =
+        this.stateCtrl.valueChanges.subscribe(val => this.reactiveStates = this.filterStates(val));
+
+  }
+
+  filterStates(val: string) {
+    return val ? this.states.filter((s) => s.name.match(new RegExp(val, 'gi'))) : this.states;
+  }
+
+  ngOnDestroy() {
+    this.reactiveValueSub.unsubscribe();
+  }
+
 }

src/lib/autocomplete/_autocomplete-theme.scss

@@ -4,10 +4,12 @@
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
-  md-option {
+  .md-autocomplete-panel {
     background: md-color($background, card);
     color: md-color($foreground, text);
+  }
 
+  md-option {
     &.md-selected {
       background: md-color($background, card);
       color: md-color($foreground, text);

src/lib/autocomplete/autocomplete-trigger.ts

@@ -1,10 +1,14 @@
-import {Directive, ElementRef, Input, ViewContainerRef, OnDestroy} from '@angular/core';
+import {
+  Directive, ElementRef, Input, ViewContainerRef, Optional, OnDestroy
+} from '@angular/core';
+import {NgControl} from '@angular/forms';
 import {Overlay, OverlayRef, OverlayState, TemplatePortal} from '../core';
 import {MdAutocomplete} from './autocomplete';
 import {PositionStrategy} from '../core/overlay/position/position-strategy';
 import {Observable} from 'rxjs/Observable';
 import {Subscription} from 'rxjs/Subscription';
 import 'rxjs/add/observable/merge';
+import {MdOptionSelectEvent} from '../core/option/option';
 
 /** The panel needs a slight y-offset to ensure the input underline displays. */
 export const MD_AUTOCOMPLETE_PANEL_OFFSET = 6;
@@ -23,11 +27,15 @@ export class MdAutocompleteTrigger implements OnDestroy {
   /** The subscription to events that close the autocomplete panel. */
   private _closingActionsSubscription: Subscription;
 
+  /** The subscription to changes in the options list. */
+  private _optionChangesSubscription: Subscription;
+
   /* The autocomplete panel to be attached to this trigger. */
   @Input('mdAutocomplete') autocomplete: MdAutocomplete;
 
   constructor(private _element: ElementRef, private _overlay: Overlay,
-              private _viewContainerRef: ViewContainerRef) {}
+              private _viewContainerRef: ViewContainerRef,
+              @Optional() private _controlDir: NgControl) {}
 
   ngOnDestroy() { this._destroyPanel(); }
 
@@ -44,8 +52,9 @@ export class MdAutocompleteTrigger implements OnDestroy {
 
     if (!this._overlayRef.hasAttached()) {
       this._overlayRef.attach(this._portal);
-      this._closingActionsSubscription =
-          this.panelClosingActions.subscribe(() => this.closePanel());
+      this._resetClosingActionSub();
+      this._optionChangesSubscription =
+          this.autocomplete.options.changes.subscribe(() => this._resetClosingActionSub());
     }
 
     this._panelOpen = true;
@@ -58,6 +67,7 @@ export class MdAutocompleteTrigger implements OnDestroy {
     }
 
     this._closingActionsSubscription.unsubscribe();
+    this._optionChangesSubscription.unsubscribe();
     this._panelOpen = false;
   }
 
@@ -75,6 +85,20 @@ export class MdAutocompleteTrigger implements OnDestroy {
     return this.autocomplete.options.map(option => option.onSelect);
   }
 
+  /**
+   * Drops the current closing action subscription and re-creates it.
+   * Used whenever the option list changes to ensure that new options
+   * can be selected properly.
+   */
+  private _resetClosingActionSub(): void {
+    if (this._closingActionsSubscription) {
+      this._closingActionsSubscription.unsubscribe();
+    }
+
+    this._closingActionsSubscription =
+        this.panelClosingActions.subscribe(event => this._setValueAndClose(event));
+  }
+
   /** Destroys the autocomplete suggestion panel. */
   private _destroyPanel(): void {
     if (this._overlayRef) {
@@ -84,6 +108,23 @@ export class MdAutocompleteTrigger implements OnDestroy {
     }
   }
 
+   /**
+   * This method closes the panel, and if a value is specified, also sets the associated
+   * control to that value. It will also mark the control as dirty if this interaction
+   * stemmed from the user.
+   */
+  private _setValueAndClose(event: MdOptionSelectEvent | null): void {
+    if (event) {
+      // TODO(kara): revisit animation once floating placeholder is toggle-able
+      this._controlDir.control.setValue(event.source.value);
+      if (event.isUserInput) {
+        this._controlDir.control.markAsDirty();
+      }
+    }
+
+    this.closePanel();
+  }
+
   private _createOverlay(): void {
     this._portal = new TemplatePortal(this.autocomplete.template, this._viewContainerRef);
     this._overlayRef = this._overlay.create(this._getOverlayConfig());