Fixed find file keyboard navigationfind-file-enter-fix

Closes #23423

2 files changed, 51 insertions, 0 deletions

diff --git a/app/assets/javascripts/project_find_file.js b/app/assets/javascripts/project_find_file.js
index 8e38ccf7e44..b8347367717 100644
--- a/app/assets/javascripts/project_find_file.js
+++ b/app/assets/javascripts/project_find_file.js
@@ -7,6 +7,7 @@
     function ProjectFindFile(element1, options) {
       this.element = element1;
       this.options = options;
+      this.goToBlob = bind(this.goToBlob, this);
       this.goToTree = bind(this.goToTree, this);
       this.selectRowDown = bind(this.selectRowDown, this);
       this.selectRowUp = bind(this.selectRowUp, this);
@@ -154,6 +155,14 @@
       return location.href = this.options.treeUrl;
     };
 
+    ProjectFindFile.prototype.goToBlob = function() {
+      var $link = this.element.find(".tree-item.selected .tree-item-file-name a");
+
+      if ($link.length) {
+        $link.get(0).click();
+      }
+    };
+
     return ProjectFindFile;
 
   })();
diff --git a/spec/features/projects/files/find_file_keyboard_spec.rb b/spec/features/projects/files/find_file_keyboard_spec.rb
new file mode 100644
index 00000000000..fc88fd74af8
--- /dev/null
+++ b/spec/features/projects/files/find_file_keyboard_spec.rb
@@ -0,0 +1,42 @@
+require 'spec_helper'
+
+feature 'Find file keyboard shortcuts', feature: true, js: true do
+  include WaitForAjax
+
+  let(:user) { create(:user) }
+  let(:project) { create(:project) }
+
+  before do
+    project.team << [user, :master]
+    login_as user
+
+    visit namespace_project_find_file_path(project.namespace, project, project.repository.root_ref)
+
+    wait_for_ajax
+  end
+
+  it 'opens file when pressing enter key' do
+    fill_in 'file_find', with: 'CHANGELOG'
+
+    find('#file_find').native.send_keys(:enter)
+
+    expect(page).to have_selector('.blob-content-holder')
+
+    page.within('.file-title') do
+      expect(page).to have_content('CHANGELOG')
+    end
+  end
+
+  it 'navigates files with arrow keys' do
+    fill_in 'file_find', with: 'application.'
+
+    find('#file_find').native.send_keys(:down)
+    find('#file_find').native.send_keys(:enter)
+
+    expect(page).to have_selector('.blob-content-holder')
+
+    page.within('.file-title') do
+      expect(page).to have_content('application.js')
+    end
+  end
+end