From 09aa1c57f10c1b300cebd54592c910d77097567b Mon Sep 17 00:00:00 2001
From: Beowulf <beowulf@beocode.eu>
Date: Sat, 1 Jun 2024 03:20:04 +0200
Subject: [PATCH] show edit textfield always initially when editing comments
 When a comment was added and saved with the preview tab active, the preview
 tab is still active, when the comment is edited again. This adds a "hacky"
 solution, but it works and is simple. Every time the edit is "started" and
 the editor already exists, the tab with the edit text field gets clicked to
 activate it.

Fixes #1334
---
 tests/e2e/edit-comment.test.e2e.js | 31 ++++++++++++++++++++++++++++++
 web_src/js/features/repo-legacy.js |  3 +++
 2 files changed, 34 insertions(+)
 create mode 100644 tests/e2e/edit-comment.test.e2e.js

diff --git a/tests/e2e/edit-comment.test.e2e.js b/tests/e2e/edit-comment.test.e2e.js
new file mode 100644
index 000000000..c2a5a8fec
--- /dev/null
+++ b/tests/e2e/edit-comment.test.e2e.js
@@ -0,0 +1,31 @@
+// @ts-check
+import {test, expect} from '@playwright/test';
+import {login_user, load_logged_in_context} from './utils_e2e.js';
+
+test.beforeAll(async ({browser}, workerInfo) => {
+  await login_user(browser, workerInfo, 'user2');
+});
+
+test('Always focus edit tab first on edit', async ({browser}, workerInfo) => {
+  const context = await load_logged_in_context(browser, workerInfo, 'user2');
+  const page = await context.newPage();
+  const response = await page.goto('/user2/repo1/issues/1');
+  await expect(response?.status()).toBe(200);
+
+  // Switch to preview tab and save
+  await page.click('#issue-1 .comment-container .context-menu');
+  await page.click('#issue-1 .comment-container .menu>.edit-content');
+  await page.locator('#issue-1 .comment-container a[data-tab-for=markdown-previewer]').click();
+  await page.click('#issue-1 .comment-container .save');
+
+  await page.waitForLoadState('networkidle');
+
+  // Edit again and assert that edit tab should be active (and not preview tab)
+  await page.click('#issue-1 .comment-container .context-menu');
+  await page.click('#issue-1 .comment-container .menu>.edit-content');
+  const editTab = page.locator('#issue-1 .comment-container a[data-tab-for=markdown-writer]');
+  const previewTab = page.locator('#issue-1 .comment-container a[data-tab-for=markdown-previewer]');
+
+  await expect(editTab).toHaveClass(/active/);
+  await expect(previewTab).not.toHaveClass(/active/);
+});
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index a14241b5a..76de8daf5 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -479,6 +479,9 @@ async function onEditContent(event) {
     editContentZone.addEventListener('ce-quick-submit', saveAndRefresh);
     editContentZone.querySelector('.cancel.button').addEventListener('click', cancelAndReset);
     editContentZone.querySelector('.save.button').addEventListener('click', saveAndRefresh);
+  } else {
+    const tabEditor = editContentZone.querySelector('.combo-markdown-editor').querySelector('.tabular.menu > a[data-tab-for=markdown-writer]');
+    tabEditor?.click();
   }
 
   // Show write/preview tab and copy raw content as needed