Add latest changes from gitlab-org/gitlab@master

1 files changed, 21 insertions, 2 deletions

diff --git a/app/assets/javascripts/projects/project_new.js b/app/assets/javascripts/projects/project_new.js
index fbef51b43b2..3e1c471f015 100644
--- a/app/assets/javascripts/projects/project_new.js
+++ b/app/assets/javascripts/projects/project_new.js
@@ -3,6 +3,7 @@ import { debounce } from 'lodash';
 import DEFAULT_PROJECT_TEMPLATES from 'ee_else_ce/projects/default_project_templates';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import { DEFAULT_DEBOUNCE_AND_THROTTLE_MS } from '../lib/utils/constants';
+import { ENTER_KEY } from '../lib/utils/keys';
 import axios from '../lib/utils/axios_utils';
 import {
   convertToTitleCase,
@@ -182,7 +183,11 @@ const bindEvents = () => {
     $projectTemplateButtons.addClass('hidden');
     $projectFieldsForm.addClass('selected');
     $selectedIcon.empty();
-    const value = $(this).val();
+
+    const $selectedTemplate = $(this);
+    $selectedTemplate.prop('checked', true);
+
+    const value = $selectedTemplate.val();
 
     const selectedTemplate = DEFAULT_PROJECT_TEMPLATES[value];
     $selectedTemplateText.text(selectedTemplate.text);
@@ -194,7 +199,21 @@ const bindEvents = () => {
     setProjectNamePathHandlers($activeTabProjectName, $activeTabProjectPath);
   }
 
-  $useTemplateBtn.on('change', chooseTemplate);
+  function toggleActiveClassOnLabel(event) {
+    const $label = $(event.target).parent();
+    $label.toggleClass('active');
+  }
+
+  function chooseTemplateOnEnter(event) {
+    if (event.code === ENTER_KEY) {
+      chooseTemplate.call(this);
+    }
+  }
+
+  $useTemplateBtn.on('click', chooseTemplate);
+
+  $useTemplateBtn.on('focus focusout', toggleActiveClassOnLabel);
+  $useTemplateBtn.on('keypress', chooseTemplateOnEnter);
 
   $changeTemplateBtn.on('click', () => {
     $projectTemplateButtons.removeClass('hidden');