From cc1080731049b5d3e312ea9734b34fb1808e81ef Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sat, 13 May 2017 11:47:50 +0200 Subject: [PATCH 1/2] fix(button): ripples blocking mouse events on user content * The ripple overlay intercepts all mouse events on the user content and therefore users are not able to have interactive elements in their buttons. Normally buttons should not contain interactive elements inside, but since the fix is very easy it wouldn't hurt fixing it. * Removing the `(touchstart)` event that should prevent initial clicks because it didn't do anything (because of pointer-events: none) and the initial click doesn't seem to happen anymore. Related to #4503 --- src/lib/button/button.html | 3 +-- src/lib/button/button.scss | 6 +++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/lib/button/button.html b/src/lib/button/button.html index 1e35041e5cb5..16711cb58700 100644 --- a/src/lib/button/button.html +++ b/src/lib/button/button.html @@ -3,5 +3,4 @@ [class.mat-button-ripple-round]="_isRoundButton || _isIconButton" [mdRippleCentered]="_isIconButton" [mdRippleTrigger]="_getHostElement()"> - -
+
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index 5daf5f43e242..ace1994dbd09 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -64,6 +64,11 @@ left: 0; bottom: 0; right: 0; + + // Disable pointer events for the ripple container and focus overlay 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; } // Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo @@ -74,7 +79,6 @@ // black, 12% opacity shade over the normal color (for both light and dark themes). background-color: rgba(black, 0.12); border-radius: inherit; - pointer-events: none; opacity: 0; transition: $mat-button-focus-transition; From c3caebac5b702cbf4cd412bbe31c1d30a4e0080b Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Sat, 13 May 2017 11:53:24 +0200 Subject: [PATCH 2/2] Update comment for overlay --- src/lib/button/button.scss | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss index ace1994dbd09..346c8de56573 100644 --- a/src/lib/button/button.scss +++ b/src/lib/button/button.scss @@ -71,9 +71,7 @@ pointer-events: none; } -// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo -// element, however we use a proper DOM element in order to be able to disable the default -// touch action. This makes the buttons more responsive on touch devices. +// Element that overlays the button to show focus and hover effects. .mat-button-focus-overlay { // The button spec calls for focus on raised buttons (and FABs) to be indicated with a // black, 12% opacity shade over the normal color (for both light and dark themes).