From c4b36258aaf6c4c998e1a3ce27d69aaba67e1244 Mon Sep 17 00:00:00 2001
From: Paul Gschwendtner <paulgschwendtner@gmail.com>
Date: Sat, 13 May 2017 01:44:20 +0200
Subject: [PATCH] fix(list, option): ripples disable mouse events on user
 content (#4503)

Currently when a user places an element, that changes its color on hover, inside of a `md-option` or `md-list-item` the hover effect will never occur.

This is because the ripples are overlying the user content and all pointer events are blocked accidentally.

Fixes #4480
---
 src/lib/core/option/_option.scss | 5 +++++
 src/lib/list/list-item.html      | 6 +++++-
 src/lib/list/list.scss           | 5 +++++
 src/lib/list/list.ts             | 5 +++++
 4 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/lib/core/option/_option.scss b/src/lib/core/option/_option.scss
index 10cb01bbee1..fdea4a6037c 100644
--- a/src/lib/core/option/_option.scss
+++ b/src/lib/core/option/_option.scss
@@ -26,6 +26,11 @@
     bottom: 0;
     right: 0;
 
+    // Disable pointer events for the ripple container because the container will overlay the
+    // user content and we don't want to disable mouse events on the user content.
+    // Pointer events can be safely disabled because the ripple trigger element is the host element.
+    pointer-events: none;
+
     // In high contrast mode this completely covers the text.
     @include cdk-high-contrast {
       opacity: 0.5;
diff --git a/src/lib/list/list-item.html b/src/lib/list/list-item.html
index 1d21309ae13..16c46abd0a1 100644
--- a/src/lib/list/list-item.html
+++ b/src/lib/list/list-item.html
@@ -1,5 +1,9 @@
 <div class="mat-list-item-content" [class.mat-list-item-focus]="_hasFocus">
-  <div class="mat-list-item-ripple" md-ripple [mdRippleDisabled]="!isRippleEnabled()"></div>
+  <div class="mat-list-item-ripple" md-ripple
+       [mdRippleTrigger]="_getHostElement()"
+       [mdRippleDisabled]="!isRippleEnabled()">
+  </div>
+
   <ng-content
       select="[md-list-avatar],[md-list-icon], [mat-list-avatar], [mat-list-icon]"></ng-content>
   <div class="mat-list-text"><ng-content select="[md-line], [mat-line]"></ng-content></div>
diff --git a/src/lib/list/list.scss b/src/lib/list/list.scss
index e4d14fc077c..fd68936906e 100644
--- a/src/lib/list/list.scss
+++ b/src/lib/list/list.scss
@@ -54,6 +54,11 @@ $mat-dense-list-icon-size: 20px;
     top: 0;
     right: 0;
     bottom: 0;
+
+    // Disable pointer events for the ripple container because the container will overlay the
+    // user content and we don't want to disable mouse events on the user content.
+    // Pointer events can be safely disabled because the ripple trigger element is the host element.
+    pointer-events: none;
   }
 
   &.mat-list-item-avatar .mat-list-item-content {
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
index f188934696d..11fb7c4c288 100644
--- a/src/lib/list/list.ts
+++ b/src/lib/list/list.ts
@@ -172,4 +172,9 @@ export class MdListItem implements AfterContentInit {
   _handleBlur() {
     this._hasFocus = false;
   }
+
+  /** Retrieves the DOM element of the component host. */
+  _getHostElement(): HTMLElement {
+    return this._element.nativeElement;
+  }
 }