Clicking search pill focuses field
When clicking the pill in the search field, it now focus the field. Previously you would have to make sure you click in the field. Fixed an issue where clicking out of the field wouldn't remove the focus outline Also reduced some of the HTML to remove what isn't needed
This commit is contained in:
parent
3b10a44f47
commit
a29b45b061
|
@ -20,8 +20,7 @@ class @SearchAutocomplete
|
||||||
@dropdown = @wrap.find('.dropdown')
|
@dropdown = @wrap.find('.dropdown')
|
||||||
@dropdownContent = @dropdown.find('.dropdown-content')
|
@dropdownContent = @dropdown.find('.dropdown-content')
|
||||||
|
|
||||||
@locationBadgeEl = @getElement('.search-location-badge')
|
@locationBadgeEl = @getElement('.location-badge')
|
||||||
@locationText = @getElement('.location-text')
|
|
||||||
@scopeInputEl = @getElement('#scope')
|
@scopeInputEl = @getElement('#scope')
|
||||||
@searchInput = @getElement('.search-input')
|
@searchInput = @getElement('.search-input')
|
||||||
@projectInputEl = @getElement('#search_project_id')
|
@projectInputEl = @getElement('#search_project_id')
|
||||||
|
@ -133,7 +132,7 @@ class @SearchAutocomplete
|
||||||
scope: @scopeInputEl.val()
|
scope: @scopeInputEl.val()
|
||||||
|
|
||||||
# Location badge
|
# Location badge
|
||||||
_location: @locationText.text()
|
_location: @locationBadgeEl.text()
|
||||||
}
|
}
|
||||||
|
|
||||||
bindEvents: ->
|
bindEvents: ->
|
||||||
|
@ -143,12 +142,14 @@ class @SearchAutocomplete
|
||||||
@searchInput.on 'click', @onSearchInputClick
|
@searchInput.on 'click', @onSearchInputClick
|
||||||
@searchInput.on 'focus', @onSearchInputFocus
|
@searchInput.on 'focus', @onSearchInputFocus
|
||||||
@clearInput.on 'click', @onClearInputClick
|
@clearInput.on 'click', @onClearInputClick
|
||||||
|
@locationBadgeEl.on 'click', =>
|
||||||
|
@searchInput.focus()
|
||||||
|
|
||||||
onDocumentClick: (e) =>
|
onDocumentClick: (e) =>
|
||||||
# If clicking outside the search box
|
# If clicking outside the search box
|
||||||
# And search input is not focused
|
# And search input is not focused
|
||||||
# And we are not clicking inside a suggestion
|
# And we are not clicking inside a suggestion
|
||||||
if not $.contains(@dropdown[0], e.target) and @isFocused and not $(e.target).parents('ul').length
|
if not $.contains(@dropdown[0], e.target) and @isFocused and not $(e.target).closest('.search-form').length
|
||||||
@onSearchInputBlur()
|
@onSearchInputBlur()
|
||||||
|
|
||||||
enableAutocomplete: ->
|
enableAutocomplete: ->
|
||||||
|
@ -221,10 +222,8 @@ class @SearchAutocomplete
|
||||||
category = if item.category? then "#{item.category}: " else ''
|
category = if item.category? then "#{item.category}: " else ''
|
||||||
value = if item.value? then item.value else ''
|
value = if item.value? then item.value else ''
|
||||||
|
|
||||||
html = "<span class='location-badge'>
|
badgeText = "#{category}#{value}"
|
||||||
<i class='location-text'>#{category}#{value}</i>
|
@locationBadgeEl.text(badgeText).show()
|
||||||
</span>"
|
|
||||||
@locationBadgeEl.html(html)
|
|
||||||
@wrap.addClass('has-location-badge')
|
@wrap.addClass('has-location-badge')
|
||||||
|
|
||||||
restoreOriginalState: ->
|
restoreOriginalState: ->
|
||||||
|
@ -233,9 +232,8 @@ class @SearchAutocomplete
|
||||||
for input in inputs
|
for input in inputs
|
||||||
@getElement("##{input}").val(@originalState[input])
|
@getElement("##{input}").val(@originalState[input])
|
||||||
|
|
||||||
|
|
||||||
if @originalState._location is ''
|
if @originalState._location is ''
|
||||||
@locationBadgeEl.empty()
|
@locationBadgeEl.hide()
|
||||||
else
|
else
|
||||||
@addLocationBadge(
|
@addLocationBadge(
|
||||||
value: @originalState._location
|
value: @originalState._location
|
||||||
|
@ -244,7 +242,7 @@ class @SearchAutocomplete
|
||||||
@dropdown.removeClass 'open'
|
@dropdown.removeClass 'open'
|
||||||
|
|
||||||
badgePresent: ->
|
badgePresent: ->
|
||||||
@locationBadgeEl.children().length
|
@locationBadgeEl.length
|
||||||
|
|
||||||
resetSearchState: ->
|
resetSearchState: ->
|
||||||
inputs = Object.keys @originalState
|
inputs = Object.keys @originalState
|
||||||
|
@ -257,7 +255,7 @@ class @SearchAutocomplete
|
||||||
@getElement("##{input}").val('')
|
@getElement("##{input}").val('')
|
||||||
|
|
||||||
removeLocationBadge: ->
|
removeLocationBadge: ->
|
||||||
@locationBadgeEl.empty()
|
@locationBadgeEl.hide()
|
||||||
|
|
||||||
# Reset state
|
# Reset state
|
||||||
@resetSearchState()
|
@resetSearchState()
|
||||||
|
|
|
@ -28,6 +28,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input {
|
.search-input {
|
||||||
|
padding-right: 20px;
|
||||||
border: none;
|
border: none;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
@ -47,6 +48,7 @@
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: $location-badge-bg;
|
background-color: $location-badge-bg;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-input-container {
|
.search-input-container {
|
||||||
|
@ -55,7 +57,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-location-badge, .search-input-wrap {
|
.search-input-wrap {
|
||||||
// Fallback if flexbox is not supported
|
// Fallback if flexbox is not supported
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,11 +6,8 @@
|
||||||
.search.search-form{class: "#{'has-location-badge' if label.present?}"}
|
.search.search-form{class: "#{'has-location-badge' if label.present?}"}
|
||||||
= form_tag search_path, method: :get, class: 'navbar-form' do |f|
|
= form_tag search_path, method: :get, class: 'navbar-form' do |f|
|
||||||
.search-input-container
|
.search-input-container
|
||||||
.search-location-badge
|
- if label.present?
|
||||||
- if label.present?
|
.location-badge= label
|
||||||
%span.location-badge
|
|
||||||
%i.location-text
|
|
||||||
= label
|
|
||||||
.search-input-wrap
|
.search-input-wrap
|
||||||
.dropdown{ data: {url: search_autocomplete_path } }
|
.dropdown{ data: {url: search_autocomplete_path } }
|
||||||
= search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off', data: { toggle: 'dropdown' }
|
= search_field_tag "search", nil, placeholder: 'Search', class: "search-input dropdown-menu-toggle", spellcheck: false, tabindex: "1", autocomplete: 'off', data: { toggle: 'dropdown' }
|
||||||
|
|
Loading…
Reference in New Issue