fix: remove duplicate IDs

templates/repo/view_file.tmpl

@@ -108,7 +108,7 @@
 {{range $idx, $code := .FileContent}}
 {{$line := Eval $idx "+" 1}}
 <tr>
-<td id="L{{$line}}" class="lines-num"><span id="L{{$line}}" data-line-number="{{$line}}"></span></td>
+<td id="L{{$line}}" class="lines-num"><span data-line-number="{{$line}}"></span></td>
 {{if $.EscapeStatus.Escaped}}
 <td class="lines-escape">{{if (index $.LineEscapeStatus $idx).Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{if (index $.LineEscapeStatus $idx).HasInvisible}}{{ctx.Locale.Tr "repo.invisible_runes_line"}} {{end}}{{if (index $.LineEscapeStatus $idx).HasAmbiguous}}{{ctx.Locale.Tr "repo.ambiguous_runes_line"}}{{end}}"></button>{{end}}</td>
 {{end}}

web_src/js/features/repo-code.ts

@@ -14,7 +14,7 @@ function changeHash(hash: string) {
 // it selects the code lines defined by range: `L1-L3` (3 lines) or `L2` (singe line)
 function selectRange(range: string): Element {
  for (const el of document.querySelectorAll('.code-view tr.active')) el.classList.remove('active');
- const elLineNums = document.querySelectorAll(`.code-view td.lines-num span[data-line-number]`);
+ const elLineNums = document.querySelectorAll(`.code-view td.lines-num[id^="L"]`);
 
  const refInNewIssue = document.querySelector('a.ref-in-new-issue');
  const copyPermalink = document.querySelector('a.copy-line-permalink');
@@ -81,11 +81,12 @@ function showLineButton() {
  el.remove();
  }
 
- // find active row and add button
- const tr = document.querySelector('.code-view tr.active');
- if (!tr) return;
+ // Find first active row and add button
+ const activeRows = document.querySelectorAll('.code-view tr.active');
+ if (activeRows.length === 0) return;
 
- const td = tr.querySelector('td.lines-num');
+ const firstActiveRow = activeRows[0];
+ const td = firstActiveRow.querySelector('td.lines-num');
  const btn = document.createElement('button');
  btn.classList.add('code-line-button', 'ui', 'basic', 'button');
  btn.innerHTML = svg('octicon-kebab-horizontal');
@@ -96,16 +97,30 @@ function showLineButton() {
 
  createTippy(btn, {
  theme: 'menu',
- trigger: 'click',
- hideOnClick: true,
+ trigger: 'manual', // Use manual trigger
  content: menu,
  placement: 'right-start',
  interactive: true,
- onShow: (tippy) => {
- tippy.popper.addEventListener('click', () => {
- tippy.hide();
- }, {once: true});
- },
+ appendTo: () => document.body,
+ });
+
+ // Handle menu button click manually
+ btn.addEventListener('click', (e) => {
+ e.stopPropagation();
+ const tippyInstance = btn._tippy;
+ if (tippyInstance && tippyInstance.state.isVisible) {
+ tippyInstance.hide();
+ } else if (tippyInstance) {
+ tippyInstance.show();
+ }
+ });
+
+ // Hide menu when clicking menu items
+ menu.addEventListener('click', () => {
+ const tippyInstance = btn._tippy;
+ if (tippyInstance) {
+ tippyInstance.hide();
+ }
  });
 }
 
@@ -118,7 +133,7 @@ export function initRepoCodeView() {
 
  // "file code view" and "blame" pages need this "line number button" feature
  let selRangeStart: string;
- addDelegatedEventListener(document, 'click', '.code-view .lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
+ addDelegatedEventListener(document, 'click', '.code-view .lines-num', (el: HTMLElement, e: KeyboardEvent) => {
  if (!selRangeStart || !e.shiftKey) {
  selRangeStart = el.getAttribute('id');
  selectRange(selRangeStart);