Wiki edit: automatically focus on the content field

When editing a Wiki automatically focus on the content field.

app/assets/javascripts/gl_form.js

@@ -67,6 +67,7 @@ export default class GLForm {
     addMarkdownListeners(this.form);
     this.form.show();
     if (this.isAutosizeable) this.setupAutosize();
+    if (this.textarea.data('autofocus') === true) this.textarea.focus();
   }
 
   setupAutosize() {

app/views/shared/_zen.html.haml

@@ -3,6 +3,7 @@
 - supports_autocomplete = local_assigns.fetch(:supports_autocomplete, true)
 - supports_quick_actions = local_assigns.fetch(:supports_quick_actions, false)
 - qa_selector = local_assigns.fetch(:qa_selector, '')
+- autofocus = local_assigns.fetch(:autofocus, false)
 .zen-backdrop
   - classes << ' js-gfm-input js-autosize markdown-area'
   - if defined?(f) && f
@@ -12,7 +13,8 @@
       dir: 'auto',
       data: { supports_quick_actions: supports_quick_actions,
         supports_autocomplete: supports_autocomplete,
-        qa_selector: qa_selector }
+        qa_selector: qa_selector,
+        autofocus: autofocus }
   - else
     = text_area_tag attr, current_text, data: { qa_selector: qa_selector }, class: classes, placeholder: placeholder
   %a.zen-control.zen-control-leave.js-zen-leave.gl-text-gray-500{ href: "#" }

app/views/shared/wikis/_form.html.haml

@@ -42,7 +42,7 @@
     .col-sm-2.col-form-label= f.label :content, class: 'control-label-full-width'
     .col-sm-10
       = render layout: 'shared/md_preview', locals: { url: wiki_page_path(@wiki, @page, action: :preview_markdown) } do
-        = render 'shared/zen', f: f, attr: :content, classes: 'note-textarea qa-wiki-content-textarea', placeholder: s_("WikiPage|Write your content or drag files here…")
+        = render 'shared/zen', f: f, attr: :content, classes: 'note-textarea qa-wiki-content-textarea', placeholder: s_("WikiPage|Write your content or drag files here…"), autofocus: @page.persisted?
         = render 'shared/notes/hints'
 
       .clearfix

changelogs/unreleased/288327-wiki-edit-automatically-focus-on-the-title-field.yml

+---
+title: 'Wiki edit: automatically focus on the content field'
+merge_request: 50941
+author: Jacopo Beschi @jacopo-beschi
+type: changed

spec/frontend/gl_form_spec.js

@@ -114,6 +114,26 @@ describe('GLForm', () => {
       });
     });
 
+    describe('autofocus', () => {
+      it('focus the textarea when autofocus is true', () => {
+        testContext.textarea.data('autofocus', true);
+        jest.spyOn($.prototype, 'focus');
+
+        testContext.glForm = new GLForm(testContext.form, false);
+
+        expect($.prototype.focus).toHaveBeenCalled();
+      });
+
+      it("doesn't focus the textarea when autofocus is false", () => {
+        testContext.textarea.data('autofocus', false);
+        jest.spyOn($.prototype, 'focus');
+
+        testContext.glForm = new GLForm(testContext.form, false);
+
+        expect($.prototype.focus).not.toHaveBeenCalled();
+      });
+    });
+
     describe('supportsQuickActions', () => {
       it('should return false if textarea does not support quick actions', () => {
         const glForm = new GLForm(testContext.form, false);

spec/support/shared_examples/features/wiki/user_updates_wiki_page_shared_examples.rb

@@ -123,6 +123,10 @@ RSpec.shared_examples 'User updates wiki page' do
       expect(page).to have_content('Updated Wiki Content')
     end
 
+    it 'focuses on the content field', :js do
+      expect(page).to have_selector '.note-textarea:focus'
+    end
+
     it 'cancels editing of a page' do
       page.within(:css, '.wiki-form .form-actions') do
         click_on('Cancel')