[Glitch] Fix ordering of keyboard access between CW field, textarea and emoji picker

Port b4d67fe57af4d45082dc92eef20d5bb758bd8379 to glitch-soc

2 files changed, 1 insertions, 14 deletions

diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
index 71fd89114..b4b43785a 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -337,10 +337,6 @@ class ComposeForm extends ImmutablePureComponent {
           />
         </div>
 
-        <div className={`emoji-picker-wrapper ${this.props.showSearch ? 'emoji-picker-wrapper--hidden' : ''}`}>
-          <EmojiPicker onPickEmoji={handleEmoji} />
-        </div>
-
         <AutosuggestTextarea
           ref={this.setAutosuggestTextarea}
           placeholder={intl.formatMessage(messages.placeholder)}
@@ -356,6 +352,7 @@ class ComposeForm extends ImmutablePureComponent {
           onPaste={onPaste}
           autoFocus={!showSearch && !isMobile(window.innerWidth, layout)}
         >
+          <EmojiPicker onPickEmoji={handleEmoji} />
           <TextareaIcons advancedOptions={advancedOptions} />
           <div className='compose-form__modifiers'>
             <UploadFormContainer />
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
index 746698c5b..62eca49a1 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -222,7 +222,6 @@
   position: absolute;
   right: 5px;
   top: 5px;
-  z-index: 1;
 
   ::-webkit-scrollbar-track:hover,
   ::-webkit-scrollbar-track:active {
@@ -294,15 +293,6 @@
   height: 0;
 }
 
-.emoji-picker-wrapper {
-  position: relative;
-  height: 0;
-
-  &.emoji-picker-wrapper--hidden {
-    display: none;
-  }
-}
-
 .autosuggest-textarea__suggestions {
   display: block;
   position: absolute;