Focus on the input when clicked outside the input

Fixed in MR list and branch list components.

Earlier clicking right outside the input box closed
the dropdown, which was unexpected behaviour. To
make it consistent with the behaviour of select2
jquery plugin, I have made clicking outside the
input focus on the input by using a label.

2 files changed, 23 insertions, 27 deletions

diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue
index 3cfdc1a367a..5e82d1150a0 100644
--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/app/assets/javascripts/ide/components/branches/search_list.vue
@@ -58,19 +58,17 @@ export default {
 
 <template>
   <div>
-    <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom">
-      <div class="position-relative">
-        <input
-          ref="searchInput"
-          v-model="search"
-          :placeholder="__('Search branches')"
-          type="search"
-          class="form-control dropdown-input-field"
-          @input="searchBranches"
-        />
-        <icon :size="18" name="search" class="input-icon" />
-      </div>
-    </div>
+    <label class="dropdown-input pt-3 pb-3 mb-0 border-bottom block position-relative" @click.stop>
+      <input
+        ref="searchInput"
+        v-model="search"
+        :placeholder="__('Search branches')"
+        type="search"
+        class="form-control dropdown-input-field"
+        @input="searchBranches"
+      />
+      <icon :size="18" name="search" class="input-icon" />
+    </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
         v-if="isLoading"
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 2d55ffb3c65..6b9c83bad6c 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -76,19 +76,17 @@ export default {
 
 <template>
   <div>
-    <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom">
-      <div class="position-relative">
-        <tokened-input
-          v-model="search"
-          :tokens="searchTokens"
-          :placeholder="__('Search merge requests')"
-          @focus="onSearchFocus"
-          @input="searchMergeRequests"
-          @removeToken="setSearchType(null)"
-        />
-        <icon :size="18" name="search" class="input-icon" />
-      </div>
-    </div>
+    <label class="dropdown-input pt-3 pb-3 mb-0 border-bottom block" @click.stop>
+      <tokened-input
+        v-model="search"
+        :tokens="searchTokens"
+        :placeholder="__('Search merge requests')"
+        @focus="onSearchFocus"
+        @input="searchMergeRequests"
+        @removeToken="setSearchType(null)"
+      />
+      <icon :size="18" name="search" class="input-icon" />
+    </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
         v-if="isLoading"
@@ -107,7 +105,7 @@ export default {
                 <span class="d-flex append-right-default ide-search-list-current-icon">
                   <icon :size="18" name="search" />
                 </span>
-                <span> {{ searchType.label }} </span>
+                <span>{{ searchType.label }}</span>
               </button>
             </li>
           </template>