kotovalexarian-likes-gitlab/gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Focus on the input when clicked outside the input

Browse source 
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.
This commit is contained in:
Himanshu Kapoor 2019-08-09 12:31:54 +05:30
parent f6a201a838
commit 8470c131fa
4 changed files with 29 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/assets/javascripts/ide/components/branches/search_list.vue
View file

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

6
app/assets/javascripts/ide/components/merge_requests/list.vue
View file

@ -76,8 +76,7 @@ export default {
<template> <template>
<div> <div>
<div class="dropdown-input mt-3 pb-3 mb-0 border-bottom"> <label class="dropdown-input pt-3 pb-3 mb-0 border-bottom block" @click.stop>
<div class="position-relative">
<tokened-input <tokened-input
v-model="search" v-model="search"
:tokens="searchTokens" :tokens="searchTokens"
@ -87,8 +86,7 @@ export default {
@removeToken="setSearchType(null)" @removeToken="setSearchType(null)"
/> />
<icon :size="18" name="search" class="input-icon" /> <icon :size="18" name="search" class="input-icon" />
</div> </label>
</div>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex"> <div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
<gl-loading-icon <gl-loading-icon
v-if="isLoading" v-if="isLoading"

2
app/assets/stylesheets/page_bundles/ide.scss
View file

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

5
changelogs/unreleased/61332-web-ide-mr-branch-dropdown-closes-unexpectedly.yml Normal file
View file

@ -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