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.

app/assets/javascripts/ide/components/branches/search_list.vue

@@ -58,8 +58,7 @@ export default {
 
 <template>
   <div>
-    <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom">
-      <div class="position-relative">
+    <label class="dropdown-input pt-3 pb-3 mb-0 border-bottom block position-relative" @click.stop>
       <input
         ref="searchInput"
         v-model="search"
@@ -69,8 +68,7 @@ export default {
         @input="searchBranches"
       />
       <icon :size="18" name="search" class="input-icon" />
-      </div>
-    </div>
+    </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
         v-if="isLoading"

app/assets/javascripts/ide/components/merge_requests/list.vue

@@ -76,8 +76,7 @@ export default {
 
 <template>
   <div>
-    <div class="dropdown-input mt-3 pb-3 mb-0 border-bottom">
-      <div class="position-relative">
+    <label class="dropdown-input pt-3 pb-3 mb-0 border-bottom block" @click.stop>
       <tokened-input
         v-model="search"
         :tokens="searchTokens"
@@ -87,8 +86,7 @@ export default {
         @removeToken="setSearchType(null)"
       />
       <icon :size="18" name="search" class="input-icon" />
-      </div>
-    </div>
+    </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>

app/assets/stylesheets/page_bundles/ide.scss

@@ -1188,7 +1188,7 @@ $ide-commit-header-height: 48px;
 
     .input-icon {
       right: auto;
-      left: 10px;
+      left: 26px;
       top: 50%;
       transform: translateY(-50%);
     }

changelogs/unreleased/61332-web-ide-mr-branch-dropdown-closes-unexpectedly.yml

+---
+title: Fix an issue where clicking outside the MR/branch search box in WebIDE closed the dropdown.
+merge_request: 31523
+author:
+type: fixed