open select when form field is clicked

angular · Aug 16, 2017 · 1a2a4e7 · 1a2a4e7
1 parent 2b7de29
commit 1a2a4e7
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/src/lib/form-field/form-field-control.ts b/src/lib/form-field/form-field-control.ts
@@ -48,6 +48,6 @@ export abstract class MdFormFieldControl<T> {
   /** Sets the list of element IDs that currently describe this control. */
   abstract setDescribedByIds(ids: string[]): void;
 
-  /** Focuses this control. */
-  abstract focus(): void;
+  /** Handles a click on the control's container. */
+  abstract onContainerClick(event: MouseEvent): void;
 }
diff --git a/src/lib/form-field/form-field.ts b/src/lib/form-field/form-field.ts
@@ -82,7 +82,7 @@ let nextUniqueId = 0;
     '[class.ng-valid]': '_shouldForward("valid")',
     '[class.ng-invalid]': '_shouldForward("invalid")',
     '[class.ng-pending]': '_shouldForward("pending")',
-    '(click)': '_control.focus()',
+    '(click)': '_control.onContainerClick($event)',
   },
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,

diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
@@ -197,6 +197,8 @@ export class MdInput implements MdFormFieldControl<any>, OnChanges, OnDestroy, D
     }
   }
 
+  focus() { this._elementRef.nativeElement.focus(); }
+
   /** Callback for the cases where the focused state of the input changes. */
   _focusChanged(isFocused: boolean) {
     if (isFocused !== this.focused) {
@@ -282,5 +284,5 @@ export class MdInput implements MdFormFieldControl<any>, OnChanges, OnDestroy, D
   setDescribedByIds(ids: string[]) { this._ariaDescribedby = ids.join(' '); }
 
   // Implemented as part of MdFormFieldControl.
-  focus() { this._elementRef.nativeElement.focus(); }
+  onContainerClick() { this.focus(); }
 }
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
@@ -1162,8 +1162,14 @@ export class MdSelect extends _MdSelectMixinBase implements AfterContentInit, On
     return 0;
   }
 
-  /** Sets the list of element IDs that currently describe this select. */
+  // Implemented as part of MdFormFieldControl.
   setDescribedByIds(ids: string[]) { this._ariaDescribedby = ids.join(' '); }
+
+  // Implemented as part of MdFormFieldControl.
+  onContainerClick() {
+    this.focus();
+    this.open();
+  }
 }
 
 /** Clamps a value n between min and max values. */