Merge branch 'tusooa/1250-autocomplete-select' into 'develop'

Make it possible to auto-select the first candidate in autocomplete

Closes #1250

See merge request pleroma/pleroma-fe!1789

src/components/emoji_input/emoji_input.js

@@ -134,6 +134,9 @@ const EmojiInput = {
     padEmoji () {
       return this.$store.getters.mergedConfig.padEmoji
     },
+    defaultCandidateIndex () {
+      return this.$store.getters.mergedConfig.autocompleteSelect ? 0 : -1
+    },
     preText () {
       return this.modelValue.slice(0, this.caret)
     },
@@ -287,7 +290,7 @@ const EmojiInput = {
           ...rest,
           img: imageUrl || ''
         }))
-      this.highlighted = -1
+      this.highlighted = this.defaultCandidateIndex
       this.$refs.screenReaderNotice.announce(
         this.$tc('tool_tip.autocomplete_available',
           this.suggestions.length,

src/components/settings_modal/tabs/general_tab.vue

@@ -501,6 +501,14 @@
             {{ $t('settings.pad_emoji') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="autocompleteSelect"
+            expert="1"
+          >
+            {{ $t('settings.autocomplete_select_first') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
   </div>

src/i18n/en.json

@@ -465,6 +465,7 @@
     "domain_mutes": "Domains",
     "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.",
     "pad_emoji": "Pad emoji with spaces when adding from picker",
+    "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
     "export_theme": "Save preset",
     "filtering": "Filtering",

src/modules/config.js

@@ -115,7 +115,8 @@ export const defaultState = {
   conversationTreeAdvanced: undefined, // instance default
   conversationOtherRepliesButton: undefined, // instance default
   conversationTreeFadeAncestors: undefined, // instance default
-  maxDepthInThread: undefined // instance default
+  maxDepthInThread: undefined, // instance default
+  autocompleteSelect: undefined // instance default
 }
 
 // caching the instance default properties

src/modules/instance.js

@@ -104,6 +104,7 @@ const defaultState = {
   conversationOtherRepliesButton: 'below',
   conversationTreeFadeAncestors: false,
   maxDepthInThread: 6,
+  autocompleteSelect: false,
 
   // Nasty stuff
   customEmoji: [],