From e186b5c0398c420837cb29af56fd9448fd857b15 Mon Sep 17 00:00:00 2001
From: Gusted <postmaster@gusted.xyz>
Date: Tue, 15 Jul 2025 02:22:49 +0200
Subject: [PATCH] feat: reduce amount of morphing for milestone (#8350)

- Avoid morphing too much HTML, only morph the currently selected milestone text.
- Changes that the milestone dropdown is not morphed, which contains event listeners and newer versions of the morphing library seem does not preserve event listeners in most cases.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8350
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
---
 routers/web/repo/issue.go                          |  4 ----
 templates/htmx/milestone_sidebar.tmpl              |  2 +-
 templates/repo/issue/milestone/selected.tmpl       | 11 +++++++++++
 .../issue/view_content/sidebar/milestones.tmpl     | 14 ++------------
 tests/e2e/issue-sidebar.test.e2e.ts                |  2 +-
 5 files changed, 15 insertions(+), 18 deletions(-)
 create mode 100644 templates/repo/issue/milestone/selected.tmpl

diff --git a/routers/web/repo/issue.go b/routers/web/repo/issue.go
index a4f6f97a05..7ab9d62b69 100644
--- a/routers/web/repo/issue.go
+++ b/routers/web/repo/issue.go
@@ -2401,10 +2401,6 @@ func UpdateIssueMilestone(ctx *context.Context) {
 	}
 
 	if ctx.FormBool("htmx") {
-		renderMilestones(ctx)
-		if ctx.Written() {
-			return
-		}
 		prepareHiddenCommentType(ctx)
 		if ctx.Written() {
 			return
diff --git a/templates/htmx/milestone_sidebar.tmpl b/templates/htmx/milestone_sidebar.tmpl
index 05bbd802cc..87eb5a7f42 100644
--- a/templates/htmx/milestone_sidebar.tmpl
+++ b/templates/htmx/milestone_sidebar.tmpl
@@ -1,4 +1,4 @@
 <div id="insert-timeline" hx-swap-oob="beforebegin">
 	{{template "repo/issue/view_content/comments" .}}
 </div>
-{{template "repo/issue/view_content/sidebar/milestones" .}}
+{{template "repo/issue/milestone/selected" .}}
diff --git a/templates/repo/issue/milestone/selected.tmpl b/templates/repo/issue/milestone/selected.tmpl
new file mode 100644
index 0000000000..c5ed4c81af
--- /dev/null
+++ b/templates/repo/issue/milestone/selected.tmpl
@@ -0,0 +1,11 @@
+<div id="selected-milestone" class="ui select-milestone list">
+		<span class="no-select item {{if .Issue.Milestone}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_milestone"}}</span>
+		<div class="selected">
+			{{if .Issue.Milestone}}
+				<a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
+					{{svg "octicon-milestone" 18 "tw-mr-2"}}
+					{{.Issue.Milestone.Name}}
+				</a>
+			{{end}}
+		</div>
+</div>
diff --git a/templates/repo/issue/view_content/sidebar/milestones.tmpl b/templates/repo/issue/view_content/sidebar/milestones.tmpl
index 44d9419f9b..ffcd87e8fd 100644
--- a/templates/repo/issue/view_content/sidebar/milestones.tmpl
+++ b/templates/repo/issue/view_content/sidebar/milestones.tmpl
@@ -1,4 +1,4 @@
-<div id="milestone-section" hx-swap="morph" hx-target="this" hx-indicator="this">
+<div id="milestone-section" hx-swap="morph" hx-target="#selected-milestone" hx-indicator="this">
 	<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
 		<a class="text muted flex-text-block">
 			<strong>{{ctx.Locale.Tr "repo.issues.new.milestone"}}</strong>
@@ -10,15 +10,5 @@
 			{{template "repo/issue/milestone/select_menu" .}}
 		</div>
 	</div>
-	<div class="ui select-milestone list">
-		<span class="no-select item {{if .Issue.Milestone}}tw-hidden{{end}}">{{ctx.Locale.Tr "repo.issues.new.no_milestone"}}</span>
-		<div class="selected">
-			{{if .Issue.Milestone}}
-				<a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
-					{{svg "octicon-milestone" 18 "tw-mr-2"}}
-					{{.Issue.Milestone.Name}}
-				</a>
-			{{end}}
-		</div>
-	</div>
+	{{template "repo/issue/milestone/selected" .}}
 </div>
diff --git a/tests/e2e/issue-sidebar.test.e2e.ts b/tests/e2e/issue-sidebar.test.e2e.ts
index 9d2975b612..06cf1fb98f 100644
--- a/tests/e2e/issue-sidebar.test.e2e.ts
+++ b/tests/e2e/issue-sidebar.test.e2e.ts
@@ -221,7 +221,7 @@ test('Issue: Milestone', async ({page}, workerInfo) => {
   const response = await page.goto('/user2/repo1/issues/1');
   expect(response?.status()).toBe(200);
 
-  const selectedMilestone = page.locator('.issue-content-right .select-milestone.list');
+  const selectedMilestone = page.locator('.issue-content-right #selected-milestone');
   const milestoneDropdown = page.locator('.issue-content-right .select-milestone.dropdown');
   await expect(selectedMilestone).toContainText('No milestone');