From 2ef0cdb71b13278b2b0fa7d02cb0dd13dc13991a Mon Sep 17 00:00:00 2001
From: ThibG <thib@sitedethib.com>
Date: Sat, 28 Aug 2021 14:26:20 +0200
Subject: [PATCH] Fix ordering of keyboard access between CW field, textarea
 and emoji picker

---
 app/soapbox/features/compose/components/compose_form.js | 5 +----
 app/styles/components/compose-form.scss                 | 4 +---
 app/styles/ui.scss                                      | 4 ----
 3 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index 502fbd7f8..0f34cc24d 100644
--- a/app/soapbox/features/compose/components/compose_form.js
+++ b/app/soapbox/features/compose/components/compose_form.js
@@ -314,10 +314,6 @@ export default class ComposeForm extends ImmutablePureComponent {
           />
         </div>
 
-        <div className='emoji-picker-wrapper'>
-          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
-        </div>
-
         <AutosuggestTextarea
           ref={(isModalOpen && shouldCondense) ? null : this.setAutosuggestTextarea}
           placeholder={intl.formatMessage(messages.placeholder)}
@@ -333,6 +329,7 @@ export default class ComposeForm extends ImmutablePureComponent {
           onPaste={onPaste}
           autoFocus={shouldAutoFocus}
         >
+          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
           {
             !condensed &&
             <div className='compose-form__modifiers'>
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 9daba415c..23c2ae359 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -62,9 +62,8 @@
 
   .emoji-picker-dropdown {
     position: absolute;
-    top: 5px;
+    top: 10px;
     right: 5px;
-    z-index: 1;
   }
 
   .compose-form__autosuggest-wrapper {
@@ -141,7 +140,6 @@
     }
   }
 
-  .emoji-picker-wrapper,
   .autosuggest-textarea__suggestions-wrapper {
     position: relative;
     height: 0;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index f96f26aae..b9cf99e38 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -148,10 +148,6 @@
   padding: 20px;
   margin-bottom: 20px;
 
-  .emoji-picker-wrapper {
-    .emoji-picker-dropdown { top: 10px; }
-  }
-
   .compose-form {
     flex: 1 1;
     padding: 0 0 0 20px !important;