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;
   }