Merge branch '61332-web-ide-mr-branch-dropdown-closes-unexpectedly' into 'master'

Resolve "Web IDE MR/branch dropdown closes unexpectedly"

Closes #61332

See merge request gitlab-org/gitlab-ce!31523

Author: kushalpandya

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

@@ -58,26 +58,24 @@ 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="ml-3 input-icon" />
+    </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
         v-if="isLoading"
         :size="2"
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
       />
-      <ul v-else class="mb-3 w-100">
+      <ul v-else class="mb-0 w-100">
         <template v-if="hasBranches">
           <li v-for="item in branches" :key="item.name">
             <item :item="item" :project-id="currentProjectId" :is-active="isActiveBranch(item)" />

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

@@ -76,27 +76,25 @@ 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="ml-3 input-icon" />
+    </label>
     <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
       <gl-loading-icon
         v-if="isLoading"
         :size="2"
         class="mt-3 mb-3 align-self-center ml-auto mr-auto"
       />
       <template v-else>
-        <ul class="mb-3 w-100">
+        <ul class="mb-0 w-100">
           <template v-if="showSearchTypes">
             <li v-for="searchType in $options.searchTypes" :key="searchType.type">
               <button
@@ -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

@@ -1216,11 +1216,10 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-search-list-empty {
-  height: 230px;
+  height: 69px;
 }
 
 .ide-merge-requests-dropdown-content {
-  min-height: 230px;
   max-height: 470px;
 }
 

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

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