Merge branch 'no-emoji-selector-outline-but-this-time-it-actually-works' into 'develop'

No outline for emoji selector when invisible, but this time it actually works

See merge request soapbox-pub/soapbox-fe!651

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"

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

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