Fix ordering of keyboard access between CW field, textarea and emoji picker (#11066)

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -210,10 +210,6 @@ class ComposeForm extends ImmutablePureComponent {
           />
         </div>
 
-        <div className={`emoji-picker-wrapper ${this.props.showSearch ? 'emoji-picker-wrapper--hidden' : ''}`}>
-          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
-        </div>
-
         <AutosuggestTextarea
           ref={this.setAutosuggestTextarea}
           placeholder={intl.formatMessage(messages.placeholder)}
@@ -229,6 +225,7 @@ class ComposeForm extends ImmutablePureComponent {
           onPaste={onPaste}
           autoFocus={!showSearch && !isMobile(window.innerWidth)}
         >
+          <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
           <div className='compose-form__modifiers'>
             <UploadFormContainer />
             <PollFormContainer />

app/javascript/styles/mastodon/components.scss

@@ -337,7 +337,6 @@
     position: absolute;
     top: 5px;
     right: 5px;
-    z-index: 1;
   }
 
   .compose-form__autosuggest-wrapper {
@@ -413,15 +412,6 @@
     height: 0;
   }
 
-  .emoji-picker-wrapper {
-    position: relative;
-    height: 0;
-
-    &.emoji-picker-wrapper--hidden {
-      display: none;
-    }
-  }
-
   .autosuggest-textarea__suggestions {
     box-sizing: border-box;
     display: none;