From 89810c5adbec3b45df5b39762f4be298e4bc7737 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 20 Jul 2021 16:43:59 +0300
Subject: [PATCH] Fix freezing hover state on clicked elements (#1301)

---
 src/components/ui/Button.scss   |  7 ++++++-
 src/components/ui/ListItem.scss |  9 ++++++++-
 src/components/ui/MenuItem.scss | 17 +++++++++++++----
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/Button.scss b/src/components/ui/Button.scss
index 33fb5c99..4e7ed67a 100644
--- a/src/components/ui/Button.scss
+++ b/src/components/ui/Button.scss
@@ -1,8 +1,13 @@
 @mixin active-styles() {
   &:not(.disabled):not(:disabled) {
-    &:hover, &:active, &.active, &:focus {
+    &:active, &.active, &:focus {
       @content;
     }
+    @media (hover:hover) {
+      &:hover {
+        @content;
+      }
+    }
   }
 }
 
diff --git a/src/components/ui/ListItem.scss b/src/components/ui/ListItem.scss
index 124d9b05..5b580ae5 100644
--- a/src/components/ui/ListItem.scss
+++ b/src/components/ui/ListItem.scss
@@ -48,7 +48,14 @@
     .ListItem-button {
       cursor: pointer;
 
-      body:not(.is-ios) &:hover, &:focus {
+      @media (hover:hover) {
+        &:hover, &:focus {
+          --background-color: var(--color-chat-hover);
+        }
+      }
+    }
+    @media (max-width: 600px) {
+      &:not(.has-ripple) .ListItem-button:active {
         --background-color: var(--color-chat-hover);
       }
     }
diff --git a/src/components/ui/MenuItem.scss b/src/components/ui/MenuItem.scss
index 0ac647e3..f1f27183 100644
--- a/src/components/ui/MenuItem.scss
+++ b/src/components/ui/MenuItem.scss
@@ -15,10 +15,19 @@
   cursor: pointer;
   unicode-bidi: plaintext;
 
-  &:hover, &:focus {
-    background-color: var(--color-chat-hover);
-    text-decoration: none;
-    color: inherit;
+  @media (hover:hover) {
+    &:hover, &:focus {
+      background-color: var(--color-chat-hover);
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+  @media (max-width: 600px) {
+    &:active {
+      background-color: var(--color-chat-hover);
+      text-decoration: none;
+      color: inherit;
+    }
   }
 
   i {