From 33c7fcdcb762a2fc68cd2cbc527813f4f5f9d13c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 30 Jul 2021 13:07:24 +0200
Subject: [PATCH] No outline for emoji selector when invisible, but this time
 it actually works
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../__tests__/__snapshots__/emoji_selector-test.js.snap  | 1 +
 app/soapbox/components/emoji_selector.js                 | 1 +
 app/styles/components/emoji-reacts.scss                  | 9 +++++++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
index 67ca647eb..17833fc33 100644
--- a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
+++ b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
@@ -2,6 +2,7 @@
 
 exports[`<EmojiSelector /> renders correctly 1`] = `
 <div
+  className="emoji-react-selector-container"
   onBlur={[Function]}
   onFocus={[Function]}
   tabIndex="-1"
diff --git a/app/soapbox/components/emoji_selector.js b/app/soapbox/components/emoji_selector.js
index 7fd52d965..572f63a86 100644
--- a/app/soapbox/components/emoji_selector.js
+++ b/app/soapbox/components/emoji_selector.js
@@ -81,6 +81,7 @@ class EmojiSelector extends ImmutablePureComponent {
     return (
       <HotKeys
         handlers={this.handlers}
+        className='emoji-react-selector-container'
       >
         <div
           className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index 44dc1f46a..4fca2108c 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/app/styles/components/emoji-reacts.scss
@@ -68,6 +68,13 @@
   transform: translateY(2px);
 }
 
+.emoji-react-selector-container {
+  &:hover,
+  &:focus {
+    outline: 0;
+  }
+}
+
 .emoji-react-selector {
   position: absolute;
   display: flex;
@@ -76,7 +83,6 @@
   border-radius: 9999px;
   box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
   opacity: 0;
-  outline: 0;
   pointer-events: none;
   transition: 0.1s;
   z-index: 999;
@@ -84,7 +90,6 @@
   &--visible,
   &--focused {
     opacity: 1;
-    outline: unset;
     pointer-events: all;
   }