From e383796ac23a0407139f214f4e4228147b8d8aef Mon Sep 17 00:00:00 2001
From: Nana Mochihara <nana.mochihara@axis.com>
Date: Thu, 2 Dec 2021 11:30:21 +0100
Subject: [PATCH] fix(menu): hover effect does not stay on menu button when
 menu is activated

---
 packages/core/src/Menu/BaseMenu.tsx           |  3 ++-
 .../Menu/__snapshots__/index.test.tsx.snap    | 24 ++++++++++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/core/src/Menu/BaseMenu.tsx b/packages/core/src/Menu/BaseMenu.tsx
index 2e9c20ea..f02dafaf 100644
--- a/packages/core/src/Menu/BaseMenu.tsx
+++ b/packages/core/src/Menu/BaseMenu.tsx
@@ -81,7 +81,8 @@ const MenuNativeButton = styled.button<{
     border: 2px solid transparent;
   }
 
-  &:hover {
+  &:hover,
+  &:focus-within {
     ${MenuButtonIconContainer} {
       border: 0 solid transparent;
     }
diff --git a/packages/core/src/Menu/__snapshots__/index.test.tsx.snap b/packages/core/src/Menu/__snapshots__/index.test.tsx.snap
index d8598010..edf11211 100644
--- a/packages/core/src/Menu/__snapshots__/index.test.tsx.snap
+++ b/packages/core/src/Menu/__snapshots__/index.test.tsx.snap
@@ -127,11 +127,13 @@ exports[`Menus Menu (default) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
@@ -350,11 +352,13 @@ exports[`Menus Menu (disabled) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
@@ -569,11 +573,13 @@ exports[`Menus Menu (left) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);
@@ -788,11 +794,13 @@ exports[`Menus Menu (right) 1`] = `
   border: 2px solid transparent;
 }
 
-.c3:hover .c4 {
+.c3:hover .c4,
+.c3:focus-within .c4 {
   border: 0 solid transparent;
 }
 
-.c3:hover .c8 {
+.c3:hover .c8,
+.c3:focus-within .c8 {
   background-color: rgba(204,204,204,0.16);
   -webkit-transform: scale(1);
   -ms-transform: scale(1);