From 49a0d7b033b40723ae8d5619944e39e57d2aea03 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 3 Aug 2017 00:58:52 +0200
Subject: [PATCH] fix(expansion-panel): only highlight keyboard-focused panel
 headers (#6148)

Previously the expansion panel header would be focused if it was toggled by mouse, which makes it appear stuck. These changes switch to only highlighting it if focus came programmatically or through the keyboard.
---
 src/lib/expansion/_expansion-theme.scss     | 14 +++++++-------
 src/lib/expansion/expansion-panel-header.ts | 10 ++++++++++
 src/lib/expansion/index.ts                  |  4 ++--
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/lib/expansion/_expansion-theme.scss b/src/lib/expansion/_expansion-theme.scss
index a0805533a4f6..11dde9e67994 100644
--- a/src/lib/expansion/_expansion-theme.scss
+++ b/src/lib/expansion/_expansion-theme.scss
@@ -15,19 +15,19 @@
     border-top-color: mat-color($foreground, divider);
   }
 
-  .mat-expansion-panel-header:focus,
-  .mat-expansion-panel-header:hover {
-    background: mat-color($background, hover);
+  .mat-expansion-panel-header {
+    &.cdk-keyboard-focused,
+    &.cdk-program-focused,
+    &:hover {
+      background: mat-color($background, hover);
+    }
   }
 
   .mat-expansion-panel-header-title {
     color: mat-color($foreground, text);
   }
 
-  .mat-expansion-panel-header-description {
-    color: mat-color($foreground, secondary-text);
-  }
-
+  .mat-expansion-panel-header-description,
   .mat-expansion-indicator::after {
     color: mat-color($foreground, secondary-text);
   }
diff --git a/src/lib/expansion/expansion-panel-header.ts b/src/lib/expansion/expansion-panel-header.ts
index 18d7311e7bec..0234d8d69679 100644
--- a/src/lib/expansion/expansion-panel-header.ts
+++ b/src/lib/expansion/expansion-panel-header.ts
@@ -14,6 +14,8 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   OnDestroy,
+  Renderer2,
+  ElementRef,
 } from '@angular/core';
 import {
   trigger,
@@ -25,6 +27,7 @@ import {
 import {SPACE, ENTER} from '../core/keyboard/keycodes';
 import {MdExpansionPanel, EXPANSION_PANEL_ANIMATION_TIMING} from './expansion-panel';
 import {filter} from '../core/rxjs/index';
+import {FocusOriginMonitor} from '../core/style/index';
 import {merge} from 'rxjs/observable/merge';
 import {Subscription} from 'rxjs/Subscription';
 
@@ -72,6 +75,9 @@ export class MdExpansionPanelHeader implements OnDestroy {
 
   constructor(
     @Host() public panel: MdExpansionPanel,
+    private _renderer: Renderer2,
+    private _element: ElementRef,
+    private _focusOriginMonitor: FocusOriginMonitor,
     private _changeDetectorRef: ChangeDetectorRef) {
 
     // Since the toggle state depends on an @Input on the panel, we
@@ -82,6 +88,8 @@ export class MdExpansionPanelHeader implements OnDestroy {
       filter.call(panel._inputChanges, changes => !!changes.hideToggle)
     )
     .subscribe(() => this._changeDetectorRef.markForCheck());
+
+    _focusOriginMonitor.monitor(_element.nativeElement, _renderer, false);
   }
 
   /** Toggles the expanded state of the panel. */
@@ -128,6 +136,8 @@ export class MdExpansionPanelHeader implements OnDestroy {
       this._parentChangeSubscription.unsubscribe();
       this._parentChangeSubscription = null;
     }
+
+    this._focusOriginMonitor.stopMonitoring(this._element.nativeElement);
   }
 }
 
diff --git a/src/lib/expansion/index.ts b/src/lib/expansion/index.ts
index 5defdbbc2b5f..0f6b43b2a946 100644
--- a/src/lib/expansion/index.ts
+++ b/src/lib/expansion/index.ts
@@ -8,7 +8,7 @@
 
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {CompatibilityModule, UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '../core';
+import {CompatibilityModule, StyleModule, UNIQUE_SELECTION_DISPATCHER_PROVIDER} from '../core';
 import {
   MdExpansionPanelHeader,
   MdExpansionPanelDescription,
@@ -24,7 +24,7 @@ import {
 } from './accordion';
 
 @NgModule({
-  imports: [CompatibilityModule, CommonModule],
+  imports: [CompatibilityModule, CommonModule, StyleModule],
   exports: [
     CdkAccordion,
     MdAccordion,