Fixed issue edit shortcut not workingissue-edit-shortcut

This was caused by the element getting cached on the class before the
Vue app has finished rendering.

Closes #43560

3 files changed, 20 insertions, 4 deletions

diff --git a/app/assets/javascripts/shortcuts_issuable.js b/app/assets/javascripts/shortcuts_issuable.js
index 689befc742e..14545824e74 100644
--- a/app/assets/javascripts/shortcuts_issuable.js
+++ b/app/assets/javascripts/shortcuts_issuable.js
@@ -9,13 +9,12 @@ export default class ShortcutsIssuable extends Shortcuts {
     super();
 
     this.$replyField = isMergeRequest ? $('.js-main-target-form #note_note') : $('.js-main-target-form .js-vue-comment-form');
-    this.editBtn = document.querySelector('.js-issuable-edit');
 
     Mousetrap.bind('a', () => ShortcutsIssuable.openSidebarDropdown('assignee'));
     Mousetrap.bind('m', () => ShortcutsIssuable.openSidebarDropdown('milestone'));
     Mousetrap.bind('l', () => ShortcutsIssuable.openSidebarDropdown('labels'));
     Mousetrap.bind('r', this.replyWithSelectedText.bind(this));
-    Mousetrap.bind('e', this.editIssue.bind(this));
+    Mousetrap.bind('e', ShortcutsIssuable.editIssue);
 
     if (isMergeRequest) {
       this.enabledHelp.push('.hidden-shortcut.merge_requests');
@@ -58,10 +57,10 @@ export default class ShortcutsIssuable extends Shortcuts {
     return false;
   }
 
-  editIssue() {
+  static editIssue() {
     // Need to click the element as on issues, editing is inline
     // on merge request, editing is on a different page
-    this.editBtn.click();
+    document.querySelector('.js-issuable-edit').click();
 
     return false;
   }
diff --git a/changelogs/unreleased/issue-edit-shortcut.yml b/changelogs/unreleased/issue-edit-shortcut.yml
new file mode 100644
index 00000000000..2b29b2bc03f
--- /dev/null
+++ b/changelogs/unreleased/issue-edit-shortcut.yml
@@ -0,0 +1,5 @@
+---
+title: Fixed issue edit shortcut not opening edit form
+merge_request:
+author:
+type: fixed
diff --git a/spec/features/issues/form_spec.rb b/spec/features/issues/form_spec.rb
index faf14be4818..c2c4b479a8a 100644
--- a/spec/features/issues/form_spec.rb
+++ b/spec/features/issues/form_spec.rb
@@ -271,6 +271,18 @@ describe 'New/edit issue', :js do
     end
   end
 
+  context 'inline edit' do
+    before do
+      visit project_issue_path(project, issue)
+    end
+
+    it 'opens inline edit form with shortcut' do
+      find('body').send_keys('e')
+
+      expect(page).to have_selector('.detail-page-description form')
+    end
+  end
+
   describe 'sub-group project' do
     let(:group) { create(:group) }
     let(:nested_group_1) { create(:group, parent: group) }