From 269bc1b112cb5c3dfc362c4b04aa69e8537a7c45 Mon Sep 17 00:00:00 2001 From: Tyrone Yeh Date: Tue, 10 Feb 2026 09:20:20 +0800 Subject: [PATCH] fix(diff): reprocess htmx content after loading more files (#36568) The "Show more files" button replaces `#diff-incomplete` with newly loaded diff file boxes. The inserted HTML may contain htmx attributes, but they are not processed after insertion. ### Solution Wrap the incomplete diff placeholder with a temporary wrapper so we can call `htmx.process()` on the newly inserted content. After processing, unwrap the wrapper to keep the DOM structure unchanged. ### Testing - Open a large PR diff page where `Diff.IsIncomplete` is true - Click "Show more files" - Verify newly loaded file boxes behave correctly (htmx-related features work as expected) image --------- Co-authored-by: wxiaoguang --- web_src/js/features/repo-diff.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/repo-diff.ts b/web_src/js/features/repo-diff.ts index e63de7b3cf..0c8b1357b0 100644 --- a/web_src/js/features/repo-diff.ts +++ b/web_src/js/features/repo-diff.ts @@ -170,7 +170,9 @@ async function loadMoreFiles(btn: Element): Promise { const respFileBoxes = respDoc.querySelector('#diff-file-boxes')!; // the response is a full HTML page, we need to extract the relevant contents: // * append the newly loaded file list items to the existing list - document.querySelector('#diff-incomplete')!.replaceWith(...Array.from(respFileBoxes.children)); + const respFileBoxesChildren = Array.from(respFileBoxes.children); // "children:HTMLCollection" will be empty after replaceWith + document.querySelector('#diff-incomplete')!.replaceWith(...respFileBoxesChildren); + for (const el of respFileBoxesChildren) window.htmx.process(el); onShowMoreFiles(); return true; } catch (error) { @@ -200,7 +202,7 @@ function initRepoDiffShowMore() { const resp = await response.text(); const respDoc = parseDom(resp, 'text/html'); const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body')!; - const respFileBodyChildren = Array.from(respFileBody.children); // respFileBody.children will be empty after replaceWith + const respFileBodyChildren = Array.from(respFileBody.children); // "children:HTMLCollection" will be empty after replaceWith el.parentElement!.replaceWith(...respFileBodyChildren); for (const el of respFileBodyChildren) window.htmx.process(el); // FIXME: calling onShowMoreFiles is not quite right here.