diff options
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue')
-rw-r--r-- | app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue | 44 |
1 files changed, 17 insertions, 27 deletions
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue index 5cdf7b6a3b2..6638a5de62f 100644 --- a/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue +++ b/app/assets/javascripts/vue_shared/components/filtered_search_bar/filtered_search_bar_root.vue @@ -79,6 +79,16 @@ export default { required: false, default: '', }, + searchButtonAttributes: { + type: Object, + required: false, + default: () => ({}), + }, + searchInputAttributes: { + type: Object, + required: false, + default: () => ({}), + }, }, data() { let selectedSortOption = this.sortOptions[0]?.sortDirection?.descending; @@ -163,33 +173,6 @@ export default { return undefined; }, }, - watch: { - /** - * GlFilteredSearch currently doesn't emit any event when - * tokens are manually removed from search field so we'd - * never know when user actually clears all the tokens. - * This watcher listens for updates to `filterValue` on - * such instances. :( - */ - filterValue(newValue, oldValue) { - const [firstVal] = newValue; - if ( - !this.initialRender && - newValue.length === 1 && - firstVal.type === 'filtered-search-term' && - !firstVal.value.data - ) { - const filtersCleared = - oldValue[0].type !== 'filtered-search-term' || oldValue[0].value.data !== ''; - this.$emit('onFilter', [], filtersCleared); - } - - // Set initial render flag to false - // as we don't want to emit event - // on initial load when value is empty already. - this.initialRender = false; - }, - }, created() { if (this.recentSearchesStorageKey) this.setupRecentSearch(); }, @@ -322,6 +305,10 @@ export default { return tokenOption.title; }, + onClear() { + const cleared = true; + this.$emit('onFilter', [], cleared); + }, }, }; </script> @@ -343,8 +330,11 @@ export default { :available-tokens="tokens" :history-items="filteredRecentSearches" :suggestions-list-class="suggestionsListClass" + :search-button-attributes="searchButtonAttributes" + :search-input-attributes="searchInputAttributes" class="flex-grow-1" @history-item-selected="handleHistoryItemSelected" + @clear="onClear" @clear-history="handleClearHistory" @submit="handleFilterSubmit" > |