[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 2ec77f61b..ba768c097 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -350,10 +350,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={nickname ? intl.formatMessage(messages.placeholder_as, { nickname: nickname }) : intl.formatMessage(messages.placeholder)}
@@ -369,6 +365,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 dc1416be1..6d0cee9dd 100644
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ b/app/javascript/flavours/glitch/styles/components/composer.scss
@@ -224,7 +224,6 @@
   position: absolute;
   right: 5px;
   top: 5px;
-  z-index: 1;
 
   ::-webkit-scrollbar-track:hover,
   ::-webkit-scrollbar-track:active {
@@ -296,15 +295,6 @@
   height: 0;
 }
 
-.emoji-picker-wrapper {
-  position: relative;
-  height: 0;
-
-  &.emoji-picker-wrapper--hidden {
-    display: none;
-  }
-}
-
 .autosuggest-textarea__suggestions {
   display: block;
   position: absolute;