Ensures the selected template is set

When navigating the new project templates via
keyboard, ensure we set the selected template.

app/assets/javascripts/projects/project_new.js

@@ -183,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);
@@ -218,9 +222,7 @@ const bindEvents = () => {
   });
 
   $newProjectForm.on('submit', () => {
-    if ($projectPath) {
-      $projectPath.val($projectPath.val().trim());
-    }
+    $projectPath.val($projectPath.val().trim());
   });
 
   const updateUrlPathWarningVisibility = async () => {

app/views/projects/project_templates/_template.html.haml

@@ -11,6 +11,6 @@
     %a.btn.gl-button.btn-default.gl-mr-3{ href: template.preview, rel: 'noopener noreferrer', target: '_blank', data: { track_label: "template_preview", track_property: template.name, track_action: "click_button", track_value: "" } }
       = _("Preview")
     %label.btn.gl-button.btn-confirm.template-button.choose-template.gl-mb-0{ for: template.name }
-      %input{ type: "button", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name, data: { track_label: "template_use", track_property: template.name, track_action: "click_button", track_value: "" } }
+      %input{ type: "radio", autocomplete: "off", name: "project[template_name]", id: template.name, value: template.name, data: { track_label: "template_use", track_property: template.name, track_action: "click_button", track_value: "" } }
       %span{ data: { qa_selector: 'use_template_button' } }
         = _("Use template")

spec/features/projects/new_project_spec.rb

@@ -184,43 +184,6 @@ RSpec.describe 'New project', :js do
       end
     end
 
-    context 'Template selector', :js do
-      let(:selected_template) { page.find('.project-fields-form .selected-template') }
-
-      choose_template_selector = '.choose-template'
-      template_option_selector = '.template-option'
-      template_name_selector = '.description strong'
-
-      before do
-        visit new_project_path
-        click_link 'Create from template'
-      end
-
-      it 'can select a template' do
-        first_template = first(template_option_selector)
-        first_template_name = first_template.find(template_name_selector).text
-        first_template.find(choose_template_selector).click
-
-        expect(selected_template).to have_text(first_template_name)
-
-        click_button "Change template"
-        find("#built-in").click
-
-        # Jumps down 2 templates, skipping the `preview` buttons
-        4.times do
-          page.send_keys :tab
-        end
-
-        # Ensure the template with focus is selected
-        focused_template = page.find(':focus').ancestor(template_option_selector)
-        focused_template_name = focused_template.find(template_name_selector).text
-        focused_template.find(choose_template_selector).send_keys :enter
-
-        expect(selected_template).not_to have_text(first_template_name)
-        expect(selected_template).to have_text(focused_template_name)
-      end
-    end
-
     context 'Namespace selector' do
       context 'with user namespace' do
         before do

spec/features/projects_spec.rb

@@ -15,6 +15,12 @@ RSpec.describe 'Project' do
     end
 
     shared_examples 'creates from template' do |template, sub_template_tab = nil|
+      let(:selected_template) { page.find('.project-fields-form .selected-template') }
+
+      choose_template_selector = '.choose-template'
+      template_option_selector = '.template-option'
+      template_name_selector = '.description strong'
+
       it "is created from template", :js do
         click_link 'Create from template'
         find(".project-template #{sub_template_tab}").click if sub_template_tab
@@ -27,6 +33,39 @@ RSpec.describe 'Project' do
 
         expect(page).to have_content template.name
       end
+
+      it 'is created using keyboard navigation', :js do
+        click_link 'Create from template'
+
+        first_template = first(template_option_selector)
+        first_template_name = first_template.find(template_name_selector).text
+        first_template.find(choose_template_selector).click
+
+        expect(selected_template).to have_text(first_template_name)
+
+        click_button "Change template"
+        find("#built-in").click
+
+        # Jumps down 1 template, skipping the `preview` buttons
+        2.times do
+          page.send_keys :tab
+        end
+
+        # Ensure the template with focus is selected
+        project_name = "project from template"
+        focused_template = page.find(':focus').ancestor(template_option_selector)
+        focused_template_name = focused_template.find(template_name_selector).text
+        focused_template.find(choose_template_selector).send_keys :enter
+        fill_in "project_name", with: project_name
+
+        expect(selected_template).to have_text(focused_template_name)
+
+        page.within '#content-body' do
+          click_button "Create project"
+        end
+
+        expect(page).to have_content project_name
+      end
     end
 
     context 'create with project template' do