diff options
Diffstat (limited to 'app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue')
-rw-r--r-- | app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue | 22 |
1 files changed, 20 insertions, 2 deletions
diff --git a/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue b/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue index 67ca419bf81..2f7fcfcb755 100644 --- a/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue +++ b/app/assets/javascripts/create_cluster/eks_cluster/components/cluster_form_dropdown.vue @@ -1,4 +1,5 @@ <script> +import $ from 'jquery'; import { GlIcon } from '@gitlab/ui'; import DropdownSearchInput from '~/vue_shared/components/dropdown/dropdown_search_input.vue'; import DropdownHiddenInput from '~/vue_shared/components/dropdown/dropdown_hidden_input.vue'; @@ -106,6 +107,7 @@ export default { data() { return { searchQuery: '', + focusOnSearch: false, }; }, computed: { @@ -141,6 +143,18 @@ export default { return itemsProp(this.selectedItems, this.valueProperty).join(', '); }, }, + mounted() { + $(this.$refs.dropdown) + .on('shown.bs.dropdown', () => { + this.focusOnSearch = true; + }) + .on('hidden.bs.dropdown', () => { + this.focusOnSearch = false; + }); + }, + beforeDestroy() { + $(this.$refs.dropdown).off(); + }, methods: { getItemsOrEmptyList() { return this.items || []; @@ -170,7 +184,7 @@ export default { <template> <div> - <div class="js-gcp-machine-type-dropdown dropdown"> + <div ref="dropdown" class="dropdown"> <dropdown-hidden-input :name="fieldName" :value="selectedItemsValues" /> <dropdown-button :class="{ 'border-danger': hasErrors }" @@ -179,7 +193,11 @@ export default { :toggle-text="toggleText" /> <div class="dropdown-menu dropdown-select"> - <dropdown-search-input v-model="searchQuery" :placeholder-text="searchFieldPlaceholder" /> + <dropdown-search-input + v-model="searchQuery" + :focused="focusOnSearch" + :placeholder-text="searchFieldPlaceholder" + /> <div class="dropdown-content"> <ul> <li v-if="!results.length"> |