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.
This commit is contained in:
parent
f6a201a838
commit
8470c131fa
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -1188,7 +1188,7 @@ $ide-commit-header-height: 48px;
|
|||
|
||||
.input-icon {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
left: 26px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
|
@ -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
|
Loading…
Reference in New Issue