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>
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index cbcd8a474f1..551c7cf5deb 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/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%);
     }
diff --git a/changelogs/unreleased/61332-web-ide-mr-branch-dropdown-closes-unexpectedly.yml b/changelogs/unreleased/61332-web-ide-mr-branch-dropdown-closes-unexpectedly.yml
new file mode 100644
index 00000000000..1f5e507d48d
--- /dev/null
+++ b/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