From 8470c131fa1eaacdf5a2278b69e79939fe761dcc Mon Sep 17 00:00:00 2001
From: Himanshu Kapoor <hkapoor@gitlab.com>
Date: Fri, 9 Aug 2019 12:31:54 +0530
Subject: 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.
---
 .../ide/components/branches/search_list.vue        | 24 +++++++++-----------
 .../ide/components/merge_requests/list.vue         | 26 ++++++++++------------
 app/assets/stylesheets/page_bundles/ide.scss       |  2 +-
 ...-ide-mr-branch-dropdown-closes-unexpectedly.yml |  5 +++++
 4 files changed, 29 insertions(+), 28 deletions(-)
 create mode 100644 changelogs/unreleased/61332-web-ide-mr-branch-dropdown-closes-unexpectedly.yml

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
-- 
cgit v1.2.1


From 4b9328c1c8b2c3c1e1c90b12db29e2250930b7c0 Mon Sep 17 00:00:00 2001
From: Himanshu Kapoor <hkapoor@gitlab.com>
Date: Fri, 9 Aug 2019 12:35:55 +0530
Subject: Reduce the default height of MR/branch dropdowns

To avoid having empty areas in the dropdown that occupy
unnessary space, I removed the dropdown's min-height and changed
its default height in empty state to be same as its loading state
(with the spinner).
---
 app/assets/javascripts/ide/components/branches/search_list.vue | 4 ++--
 app/assets/javascripts/ide/components/merge_requests/list.vue  | 4 ++--
 app/assets/stylesheets/page_bundles/ide.scss                   | 5 ++---
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/assets/javascripts/ide/components/branches/search_list.vue b/app/assets/javascripts/ide/components/branches/search_list.vue
index 5e82d1150a0..db8365a08e0 100644
--- a/app/assets/javascripts/ide/components/branches/search_list.vue
+++ b/app/assets/javascripts/ide/components/branches/search_list.vue
@@ -67,7 +67,7 @@ export default {
         class="form-control dropdown-input-field"
         @input="searchBranches"
       />
-      <icon :size="18" name="search" class="input-icon" />
+      <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
@@ -75,7 +75,7 @@ export default {
         :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)" />
diff --git a/app/assets/javascripts/ide/components/merge_requests/list.vue b/app/assets/javascripts/ide/components/merge_requests/list.vue
index 6b9c83bad6c..5daf2d1422c 100644
--- a/app/assets/javascripts/ide/components/merge_requests/list.vue
+++ b/app/assets/javascripts/ide/components/merge_requests/list.vue
@@ -85,7 +85,7 @@ export default {
         @input="searchMergeRequests"
         @removeToken="setSearchType(null)"
       />
-      <icon :size="18" name="search" class="input-icon" />
+      <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
@@ -94,7 +94,7 @@ export default {
         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
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 551c7cf5deb..ba126d59eef 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: 26px;
+      left: 10px;
       top: 50%;
       transform: translateY(-50%);
     }
@@ -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;
 }
 
-- 
cgit v1.2.1