Merge branch '417599-autofocus-on-switch' into 'master'

Return the focus back to the editors when switching between them

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/126974



Merged-by: Anna Vovchenko <avovchenko@gitlab.com>
Approved-by: Désirée Chevalier <dchevalier@gitlab.com>
Approved-by: Rudy Crespo <rcrespo@gitlab.com>
Approved-by: Anna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: Anna Vovchenko <avovchenko@gitlab.com>
Reviewed-by: Rudy Crespo <rcrespo@gitlab.com>
Co-authored-by: Himanshu Kapoor <hkapoor@gitlab.com>

app/assets/javascripts/content_editor/components/content_editor.vue

@@ -193,9 +193,12 @@ export default {
       }
     },
     focus() {
+      this.contentEditor.tiptapEditor.commands.focus();
+    },
+    onFocus() {
       this.focused = true;
     },
-    blur() {
+    onBlur() {
       this.focused = false;
     },
     notifyLoading() {
@@ -230,8 +233,8 @@ export default {
     <div class="md-area gl-overflow-hidden">
       <editor-state-observer
         @docUpdate="notifyChange"
-        @focus="focus"
-        @blur="blur"
+        @focus="onFocus"
+        @blur="onBlur"
         @keydown="$emit('keydown', $event)"
       />
       <content-editor-alert />

app/assets/javascripts/vue_shared/components/markdown/markdown_editor.vue

@@ -13,6 +13,22 @@ import {
 import MarkdownField from './field.vue';
 import eventHub from './eventhub';
 
+async function sleep(t = 10) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, t);
+  });
+}
+
+async function waitFor(getEl, interval = 10, timeout = 2000) {
+  if (timeout <= 0) return null;
+
+  const el = getEl();
+  if (el) return el;
+
+  await sleep(interval);
+  return waitFor(getEl, timeout - interval);
+}
+
 export default {
   components: {
     LocalStorageSync,
@@ -190,8 +206,15 @@ export default {
       this.$emit(editingMode);
       this.notifyEditingModeChange(editingMode);
     },
-    notifyEditingModeChange(editingMode) {
+    async notifyEditingModeChange(editingMode) {
       this.$emit(editingMode);
+
+      const componentToFocus =
+        editingMode === EDITING_MODE_CONTENT_EDITOR
+          ? () => this.$refs.contentEditor
+          : () => this.$refs.textarea;
+
+      (await waitFor(componentToFocus)).focus();
     },
     autofocusTextarea() {
       if (this.autofocus && this.editingMode === EDITING_MODE_MARKDOWN_FIELD) {

spec/features/issues/user_edits_issue_spec.rb

@@ -130,7 +130,7 @@ def click_edit_issue_description
             click_button("Switch to rich text editing")
           end
 
-          expect(issuable_form).not_to have_selector(content_editor_focused_selector)
+          expect(issuable_form).to have_selector(content_editor_focused_selector)
 
           refresh
 
@@ -142,7 +142,7 @@ def click_edit_issue_description
             click_button("Switch to plain text editing")
           end
 
-          expect(issuable_form).not_to have_selector(markdown_field_focused_selector)
+          expect(issuable_form).to have_selector(markdown_field_focused_selector)
         end
       end
 

spec/support/helpers/content_editor_helpers.rb

@@ -9,6 +9,10 @@ def close_rich_text_promo_popover_if_present
     end
   end
 
+  def switch_to_markdown_editor
+    click_button("Switch to plain text editing")
+  end
+
   def switch_to_content_editor
     click_button("Switch to rich text editing")
   end

spec/support/shared_examples/features/content_editor_shared_examples.rb

@@ -27,6 +27,19 @@
     expect(page).to have_text('Typing text in the content editor')
   end
 
+  it 'autofocuses the rich text editor when switching to rich text' do
+    switch_to_content_editor
+
+    expect(page).to have_css("#{content_editor_testid}:focus")
+  end
+
+  it 'autofocuses the plain text editor when switching back to markdown' do
+    switch_to_content_editor
+    switch_to_markdown_editor
+
+    expect(page).to have_css("textarea:focus")
+  end
+
   describe 'creating and editing links' do
     before do
       switch_to_content_editor