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

diff --git a/app/javascript/mastodon/features/compose/components/compose_form.js b/app/javascript/mastodon/features/compose/components/compose_form.js
index 558b7068baec21bb489ffc0009e3bfdca830ac26..60d6ce6733d97f3ca74d208aacf355ef43039418 100644 (file)
--- a/app/javascript/mastodon/features/compose/components/compose_form.js
+++ b/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 />

diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 79dbb5c87cf693e11ab2858c4885145fc767990b..545427d222642051eb6dc73e79f065818ca92373 100644 (file)
--- a/app/javascript/styles/mastodon/components.scss
+++ b/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;