From 3f8d02c2d6bb2d850ed640209c909bc0da762e75 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 4 Mar 2019 22:28:43 +0100
Subject: [PATCH] fix(list): action list missing focus and hover styling
 (#14147)

Since the action list is interactive, it needs styles when it's hovered and focused.
---
 src/lib/list/_list-theme.scss | 3 ++-
 src/lib/list/list.scss        | 3 ++-
 src/lib/list/list.spec.ts     | 8 ++++++++
 src/lib/list/list.ts          | 4 ++++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/list/_list-theme.scss b/src/lib/list/_list-theme.scss
index 465feaf68e9..71fe8e93872 100644
--- a/src/lib/list/_list-theme.scss
+++ b/src/lib/list/_list-theme.scss
@@ -27,7 +27,8 @@
   }
 
   .mat-list-option,
-  .mat-nav-list .mat-list-item {
+  .mat-nav-list .mat-list-item,
+  .mat-action-list .mat-list-item {
     &:hover, &:focus {
       background: mat-color($background, 'hover');
     }
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index 6961281344d..1741c8af9b6 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -315,7 +315,8 @@ mat-action-list {
 // use something like `@media (hover)`.
 @media (hover: none) {
   .mat-list-option,
-  .mat-nav-list .mat-list-item {
+  .mat-nav-list .mat-list-item,
+  .mat-action-list .mat-list-item {
     &:not(.mat-list-item-disabled):hover {
       background: none;
     }
diff --git a/src/lib/list/list.spec.ts b/src/lib/list/list.spec.ts
index 2d75be2f0b3..e11d4684a9d 100644
--- a/src/lib/list/list.spec.ts
+++ b/src/lib/list/list.spec.ts
@@ -140,6 +140,14 @@ describe('MatList', () => {
     expect(items.length).toBeGreaterThan(0);
   });
 
+  it('should set the proper class on the action list host', () => {
+    const fixture = TestBed.createComponent(ActionListWithoutType);
+    fixture.detectChanges();
+
+    const host = fixture.nativeElement.querySelector('mat-action-list');
+    expect(host.classList).toContain('mat-action-list');
+  });
+
   it('should enable ripples for action lists by default', () => {
     const fixture = TestBed.createComponent(ActionListWithoutType);
     fixture.detectChanges();
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
index 0c6c69c07cc..1b9ee16a10e 100644
--- a/src/lib/list/list.ts
+++ b/src/lib/list/list.ts
@@ -94,6 +94,10 @@ export class MatList extends _MatListMixinBase implements CanDisableRipple, OnCh
    */
   constructor(private _elementRef?: ElementRef<HTMLElement>) {
     super();
+
+    if (this._getListType() === 'action-list' && _elementRef) {
+      _elementRef.nativeElement.classList.add('mat-action-list');
+    }
   }
 
   _getListType(): 'list' | 'action-list' | null {