diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 2ff1abcc53..08a8daade9 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -105,7 +105,9 @@
 										{{if .Issue.IsClosed}}
 											<button id="status-button" class="secondary button" data-status="{{ctx.Locale.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.reopen_comment_issue"}}" name="status" value="reopen">
 												{{svg "octicon-issue-reopened"}}
-												{{ctx.Locale.Tr "repo.issues.reopen_issue"}}
+												<span>
+													{{ctx.Locale.Tr "repo.issues.reopen_issue"}}
+												</span>
 											</button>
 										{{else}}
 											{{$closeTranslationKey := "repo.issues.close"}}
@@ -114,7 +116,9 @@
 											{{end}}
 											<button id="status-button" class="secondary button" data-status="{{ctx.Locale.Tr $closeTranslationKey}}" data-status-and-comment="{{ctx.Locale.Tr "repo.issues.close_comment_issue"}}" name="status" value="close">
 												{{svg "octicon-issue-closed"}}
-												{{ctx.Locale.Tr $closeTranslationKey}}
+												<span>
+													{{ctx.Locale.Tr $closeTranslationKey}}
+												</span>
 											</button>
 										{{end}}
 									{{end}}
diff --git a/tests/e2e/issue-comment.test.e2e.ts b/tests/e2e/issue-comment.test.e2e.ts
index a6feb40032..24b4a66be2 100644
--- a/tests/e2e/issue-comment.test.e2e.ts
+++ b/tests/e2e/issue-comment.test.e2e.ts
@@ -74,6 +74,49 @@ test('Menu accessibility', async ({page}) => {
   await expect(page.getByLabel('user1, user2 reacted laugh. Remove laugh')).toBeVisible();
 });
 
+test.describe('Button text replaced by JS', () => {
+  async function testPage(page, path, closeLabel) {
+    await page.goto(path);
+
+    const statusButton = page.locator('#status-button');
+    const statusButtonIcon = page.locator('#status-button svg');
+    const commentField = page.locator('#comment-form').getByPlaceholder('Leave a comment');
+
+    // Reset issue status before running the test
+    if (await statusButton.getByText('Reopen').isVisible()) await statusButton.click();
+
+    // Assert that normal Close button text is present
+    await expect(statusButton.getByText(closeLabel)).toBeVisible();
+    await expect(statusButtonIcon).toBeVisible();
+
+    // Type in some text to make button text change
+    await commentField.fill('Blah blah');
+    await expect(statusButton.getByText('Close with comment')).toBeVisible();
+    await expect(statusButtonIcon).toBeVisible();
+
+    // Close issue/PR and assert that normal Reopen button text is present
+    await statusButton.click();
+    await expect(statusButton.getByText('Reopen')).toBeVisible();
+    await expect(statusButtonIcon).toBeVisible();
+
+    // Type in some text to make button text change
+    await commentField.fill('Blah blah');
+    await expect(statusButton.getByText('Reopen with comment')).toBeVisible();
+    await expect(statusButtonIcon).toBeVisible();
+
+    return true;
+  }
+
+  test('Issue', async ({page}) => {
+    // All actual expect() are happening in the helper
+    expect(await testPage(page, '/user2/repo1/issues/1', 'Close issue')).toBeTruthy();
+  });
+
+  test('PR', async ({page}) => {
+    expect(await testPage(page, '/user2/repo1/pulls/3', 'Close pull request')).toBeTruthy();
+  });
+});
+
 test('Hyperlink paste behaviour', async ({page}, workerInfo) => {
   test.skip(['Mobile Safari', 'Mobile Chrome', 'webkit'].includes(workerInfo.project.name), 'Mobile clients seem to have very weird behaviour with this test, which I cannot confirm with real usage');
   await page.goto('/user2/repo1/issues/new');
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 84b8e42a61..73131706cc 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -745,8 +745,8 @@ export function initSingleCommentEditor($commentForm) {
   const statusButton = document.getElementById('status-button');
   if (statusButton) {
     opts.onContentChanged = (editor) => {
-      const statusText = statusButton.getAttribute(editor.value().trim() ? 'data-status-and-comment' : 'data-status');
-      statusButton.textContent = statusText;
+      const newText = statusButton.getAttribute(editor.value().trim() ? 'data-status-and-comment' : 'data-status');
+      statusButton.querySelector('span').textContent = newText;
     };
   }
   initComboMarkdownEditor($commentForm.find('.combo-markdown-editor'), opts);