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() {