From 191f3ba05c42f299f32b48350d704b6182e4058c Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 21 Oct 2018 17:35:23 +0200
Subject: [PATCH] fix(button-toggle): remove hover state on touch devices

Negates the `:hover` state on touch devices, in order to prevent it from lingering after the user taps on a button toggle. Also fixes the native tap highlight showing up if the user taps on a disabled toggle group.
---
 src/lib/button-toggle/button-toggle.scss | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/lib/button-toggle/button-toggle.scss b/src/lib/button-toggle/button-toggle.scss
index bc141a35850a..d623a8c7b1ec 100644
--- a/src/lib/button-toggle/button-toggle.scss
+++ b/src/lib/button-toggle/button-toggle.scss
@@ -19,6 +19,7 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
   white-space: nowrap;
   overflow: hidden;
   border-radius: $mat-button-toggle-legacy-border-radius;
+  -webkit-tap-highlight-color: transparent;
 
   @include cdk-high-contrast {
     outline: solid 1px;
@@ -47,7 +48,6 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
 .mat-button-toggle {
   white-space: nowrap;
   position: relative;
-  -webkit-tap-highlight-color: transparent;
 
   &.cdk-keyboard-focused {
     .mat-button-toggle-focus-overlay {
@@ -78,6 +78,16 @@ $mat-button-toggle-legacy-border-radius: 2px !default;
       opacity: 0.5;
     }
   }
+
+  // On touch devices the hover state will linger on the element after the user has tapped.
+  // Disable it, because it can be confused with focus. We target the :hover state explicitly,
+  // because we still want to preserve the keyboard focus state for hybrid devices that have
+  // a keyboard and a touchscreen.
+  @media (hover: none) {
+    &:not(.mat-button-toggle-disabled):hover .mat-button-toggle-focus-overlay {
+      display: none;
+    }
+  }
 }
 
 .mat-button-toggle-label-content {