diff options
Diffstat (limited to 'app/assets/javascripts/blob/file_template_selector.js')
-rw-r--r-- | app/assets/javascripts/blob/file_template_selector.js | 26 |
1 files changed, 25 insertions, 1 deletions
diff --git a/app/assets/javascripts/blob/file_template_selector.js b/app/assets/javascripts/blob/file_template_selector.js index a5c8050b772..e02217d0deb 100644 --- a/app/assets/javascripts/blob/file_template_selector.js +++ b/app/assets/javascripts/blob/file_template_selector.js @@ -19,6 +19,17 @@ export default class FileTemplateSelector { this.$dropdownToggleText = this.$wrapper.find('.dropdown-toggle-text'); this.initDropdown(); + this.selectInitialTemplate(); + } + + selectInitialTemplate() { + const template = this.$dropdown.data('selected'); + + if (!template) { + return; + } + + this.mediator.selectTemplateFile(this, template); } show() { @@ -27,6 +38,19 @@ export default class FileTemplateSelector { } this.$wrapper.removeClass('hidden'); + + /** + * We set the focus on the dropdown that was just shown. This is done so that, after selecting + * a template type, the template selector immediately receives the focus. + * This improves the UX of the tour as the suggest_gitlab_ci_yml popover requires its target to + * be have the focus to appear. This way, users don't have to interact with the template + * selector to actually see the first hint: it is shown as soon as the selector becomes visible. + * We also need a timeout here, otherwise the template type selector gets stuck and can not be + * closed anymore. + */ + setTimeout(() => { + this.$dropdown.focus(); + }, 0); } hide() { @@ -36,7 +60,7 @@ export default class FileTemplateSelector { } isHidden() { - return this.$wrapper.hasClass('hidden'); + return !this.$wrapper || this.$wrapper.hasClass('hidden'); } getToggleText() { |