Merge branch '22058-auto-selection' into 'master'

Change auto selection behaviour of emoji and slash commands to be more UX/Type friendly

## What does this MR do?
In the context of a special command (starting with "/", ":", ...), the MR disables auto selection of first item in the dropdown suggestion menu, until at least a character has been typed.
This behavior change originated from #22058 and #23578 in which problems with the ":" special command were pointed out.

## Are there points in the code the reviewer needs to double check?
At lines +187 and +242 there were originally no sorters. Given what ``DefaultOptions.sorter`` does, I don't think it is a problem.

## Why was this MR needed?
To solve #22058 and #23578 

## Does this MR meet the acceptance criteria?

- [X] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added
- [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md)
- [ ] API support added
- Tests
  - [ ] Added for this feature/bug
  - [X] All builds are passing
- [X] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [X] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [X] Branch has no merge conflicts with `master` (if it does - rebase it please)
- [X] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #22058 and #23578 

See merge request !7129

2 files changed, 5 insertions, 0 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8250b9b5cdb..e60f526d925 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@ entry.
 - Trim leading and trailing whitespace on project_path (Linus Thiel)
 - Prevent award emoji via notes for issues/MRs authored by user (barthc)
 - Adds support for the `token` attribute in project hooks API (Gauvain Pocentek)
+- Change auto selection behaviour of emoji and slash commands to be more UX/Type friendly (Yann Gravrand)
 - Adds an optional path parameter to the Commits API to filter commits by path (Luis HGO)
 - Fix Markdown styling inside reference links (Jan Zdráhal)
 - Create new issue board list after creating a new label
diff --git a/app/assets/javascripts/gfm_auto_complete.js.es6 b/app/assets/javascripts/gfm_auto_complete.js.es6
index 824413bf20f..e72e2194be8 100644
--- a/app/assets/javascripts/gfm_auto_complete.js.es6
+++ b/app/assets/javascripts/gfm_auto_complete.js.es6
@@ -34,6 +34,8 @@
     },
     DefaultOptions: {
       sorter: function(query, items, searchKey) {
+        // Highlight first item only if at least one char was typed
+        this.setting.highlightFirst = query.length > 0;
         if ((items[0].name != null) && items[0].name === 'loading') {
           return items;
         }
@@ -182,6 +184,7 @@
         insertTpl: '${atwho-at}"${title}"',
         data: ['loading'],
         callbacks: {
+          sorter: this.DefaultOptions.sorter,
           beforeSave: function(milestones) {
             return $.map(milestones, function(m) {
               if (m.title == null) {
@@ -236,6 +239,7 @@
         displayTpl: this.Labels.template,
         insertTpl: '${atwho-at}${title}',
         callbacks: {
+          sorter: this.DefaultOptions.sorter,
           beforeSave: function(merges) {
             var sanitizeLabelTitle;
             sanitizeLabelTitle = function(title) {