AutosuggestInput: refactor CSS, fix hotkeys

app/soapbox/components/autosuggest_input.js

@@ -122,7 +122,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
     case 'Enter':
     case 'Tab':
       // Select suggestion
-      if (this.state.lastToken !== null && suggestions.size > 0 && !suggestionsHidden) {
+      if (suggestions.size > 0 && !suggestionsHidden) {
         e.preventDefault();
         e.stopPropagation();
         this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));

app/styles/application.scss

@@ -30,6 +30,7 @@
 @import 'chats';
 @import 'navigation';
 @import 'placeholder';
+@import 'autosuggest';
 
 // COMPONENTS
 @import 'components/buttons';

app/styles/autosuggest.scss

@@ -0,0 +1,104 @@
+.autosuggest-textarea,
+.autosuggest-input,
+.spoiler-input {
+  position: relative;
+}
+
+.autosuggest-textarea__textarea,
+.autosuggest-input input,
+.react-datepicker__input-container input {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  background: transparent;
+  color: var(--primary-text-color);
+  padding: 10px;
+  font-family: inherit;
+  font-size: 16px;
+  resize: vertical;
+  border: 0;
+  outline: 0;
+
+  &:focus {
+    outline: 0;
+  }
+
+  @media screen and (max-width: 600px) {
+    font-size: 16px;
+  }
+}
+
+.autosuggest-textarea__textarea {
+  min-height: 100px;
+  border-radius: 5px 5px 0 0;
+  padding-bottom: 0;
+  padding-right: 10px + 22px;
+  resize: none;
+  scrollbar-color: initial;
+  transition: 0.2s;
+
+  &::-webkit-scrollbar {
+    all: unset;
+  }
+
+  @media screen and (max-width: 600px) {
+    max-height: 100px !important; // prevent auto-resize textarea
+    resize: vertical;
+  }
+}
+
+.autosuggest-textarea__suggestions-wrapper {
+  position: relative;
+  height: 0;
+}
+
+.autosuggest-textarea__suggestions {
+  box-sizing: border-box;
+  display: none;
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  z-index: 501; /* Above TimelineQueueHeader */
+  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+  background: var(--background-color);
+  border-radius: 0 0 4px 4px;
+  font-size: 14px;
+  padding: 6px;
+  &.autosuggest-textarea__suggestions--visible { display: block; }
+}
+
+.autosuggest-textarea__suggestions__item {
+  padding: 10px;
+  cursor: pointer;
+  border-radius: 4px;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.selected {
+    background: var(--brand-color--med);
+  }
+}
+
+.autosuggest-account,
+.autosuggest-emoji {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  line-height: 18px;
+  font-size: 14px;
+}
+
+.autosuggest-account-icon,
+.autosuggest-emoji img {
+  display: block;
+  margin-right: 8px;
+  width: 16px;
+  height: 16px;
+}
+
+.autosuggest-account .display-name__account {
+  color: var(--primary-text-color--faint);
+}

app/styles/components/compose-form.scss

@@ -70,12 +70,6 @@
     position: relative;
   }
 
-  .autosuggest-textarea,
-  .autosuggest-input,
-  .spoiler-input {
-    position: relative;
-  }
-
   .spoiler-input {
     height: 0;
     transform-origin: bottom;
@@ -88,51 +82,8 @@
     }
   }
 
-  .autosuggest-textarea__textarea,
-  .spoiler-input__input,
-  .react-datepicker__input-container input {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    background: var(--background-color);
-    color: var(--primary-text-color);
-    padding: 10px;
-    font-family: inherit;
-    font-size: 16px;
-    resize: vertical;
-    border: 0;
-    outline: 0;
-
-    &:focus {
-      outline: 0;
-    }
-
-    @media screen and (max-width: 600px) {
-      font-size: 16px;
-    }
-  }
   .spoiler-input__input { border-radius: 4px; }
 
-  .autosuggest-textarea__textarea {
-    min-height: 100px;
-    border-radius: 5px 5px 0 0;
-    padding-bottom: 0;
-    padding-right: 10px + 22px;
-    resize: none;
-    scrollbar-color: initial;
-    transition: 0.2s;
-
-    &::-webkit-scrollbar {
-      all: unset;
-    }
-
-    @media screen and (max-width: 600px) {
-      max-height: 100px !important; // prevent auto-resize textarea
-      resize: vertical;
-    }
-  }
-
   &.condensed {
     .autosuggest-textarea__textarea {
       min-height: 46px;
@@ -140,61 +91,6 @@
     }
   }
 
-  .autosuggest-textarea__suggestions-wrapper {
-    position: relative;
-    height: 0;
-  }
-
-  .autosuggest-textarea__suggestions {
-    box-sizing: border-box;
-    display: none;
-    position: absolute;
-    top: 100%;
-    width: 100%;
-    z-index: 501; /* Above TimelineQueueHeader */
-    box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-    background: var(--background-color);
-    border-radius: 0 0 4px 4px;
-    font-size: 14px;
-    padding: 6px;
-    &.autosuggest-textarea__suggestions--visible { display: block; }
-  }
-
-  .autosuggest-textarea__suggestions__item {
-    padding: 10px;
-    cursor: pointer;
-    border-radius: 4px;
-
-    &:hover,
-    &:focus,
-    &:active,
-    &.selected {
-      background: var(--brand-color--med);
-    }
-  }
-
-  .autosuggest-account,
-  .autosuggest-emoji {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    line-height: 18px;
-    font-size: 14px;
-  }
-
-  .autosuggest-account-icon,
-  .autosuggest-emoji img {
-    display: block;
-    margin-right: 8px;
-    width: 16px;
-    height: 16px;
-  }
-
-  .autosuggest-account .display-name__account {
-    color: var(--primary-text-color--faint);
-  }
-
   &__modifiers {
     color: var(--primary-text-color);
     font-family: inherit;

app/styles/ui.scss

@@ -166,6 +166,15 @@
       padding: 0 !important;
     }
 
+    .spoiler-input__input,
+    .autosuggest-textarea__textarea {
+      background-color: var(--background-color);
+    }
+
+    .autosuggest-textarea__textarea {
+      padding: 14px 32px 13px 10px !important;
+    }
+
     .compose-form__autosuggest-wrapper {
       &::before {
         content: "";
@@ -184,10 +193,6 @@
           display: none;
         }
       }
-
-      .autosuggest-textarea__textarea {
-        padding: 14px 32px 13px 10px !important;
-      }
     }
   }