Use first commit title for multi-commit PRs and fix auto-focus title field (#36606)

Fixes: https://github.com/go-gitea/gitea/issues/34865

1. When opening a PR from a branch with multiple commits, use the first
(oldest) commit's title as the default title instead of the branch name
2. Fix autofocus on PR title input field

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/features/common-button.ts

@@ -2,6 +2,7 @@ import {POST} from '../modules/fetch.ts';
 import {addDelegatedEventListener, hideElem, isElemVisible, showElem, toggleElem} from '../utils/dom.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {camelize} from 'vue';
+import {applyAutoFocus} from './common-page.ts';
 
 export function initGlobalButtonClickOnEnter(): void {
   addDelegatedEventListener(document, 'keypress', 'div.ui.button, span.ui.button', (el, e: KeyboardEvent) => {
@@ -88,7 +89,7 @@ function onShowPanelClick(el: HTMLElement, e: MouseEvent) {
   const elems = el.classList.contains('toggle') ? toggleElem(sel) : showElem(sel);
   for (const elem of elems) {
     if (isElemVisible(elem as HTMLElement)) {
-      elem.querySelector<HTMLElement>('[autofocus]')?.focus();
+      applyAutoFocus(elem);
     }
   }
 }

web_src/js/features/common-page.ts

@@ -116,12 +116,30 @@ function attachInputDirAuto(el: Partial<HTMLInputElement | HTMLTextAreaElement>)
   }
 }
 
+function autoFocusEnd(el: HTMLInputElement | HTMLTextAreaElement) {
+  el.focus();
+  el.setSelectionRange(el.value.length, el.value.length);
+}
+
+export function applyAutoFocus(container: Element) {
+  // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/autofocus
+  // "autofocus" behavior is defined by the standard: when a container (e.g.: dialog) becomes visible, focus the element with "autofocus" attribute
+  // Fomantic UI already supports it for its modal dialog, we need to cover more cases (e.g.: ".show-panel" button)
+  // Here is just a simple support, we don't expect more than one element that need "autofocus" appearing in the same container
+  container.querySelector<HTMLElement>('[autofocus]')?.focus();
+  // Also, apply our autoFocusEnd behavior
+  // TODO: GLOBAL-INIT-MULTIPLE-FUNCTIONS: use "~=" operator in case we would extend the "data-global-init" to support more functions in the future.
+  const el = container.querySelector<HTMLInputElement>('[data-global-init~="autoFocusEnd"]');
+  if (el) autoFocusEnd(el);
+}
+
 export function initGlobalInput() {
   registerGlobalSelectorFunc('input, textarea', attachInputDirAuto);
-  registerGlobalInitFunc('initInputAutoFocusEnd', (el: HTMLInputElement) => {
-    el.focus(); // expects only one such element on one page. If there are many, then the last one gets the focus.
-    el.setSelectionRange(el.value.length, el.value.length);
-  });
+
+  // autoFocusEnd is used for autofocus an input/textarea and move the cursor to the end of the text.
+  // It is useful for "New Issue"/"New PR" pages when the title is pre-filled with prefix text (e.g.: from template or commit message)
+  // The native "autofocus" isn't used because there is a delay between "focused (DOM rendering)" and "move cursor to end (our JS)", it causes flickers.
+  registerGlobalInitFunc('autoFocusEnd', autoFocusEnd);
 }
 
 /**

web_src/js/modules/observer.ts

@@ -42,6 +42,7 @@ export function registerGlobalInitFunc<T extends HTMLElement>(name: string, hand
 }
 
 function callGlobalInitFunc(el: HTMLElement) {
+  // TODO: GLOBAL-INIT-MULTIPLE-FUNCTIONS: maybe in the future we need to extend it to support multiple functions, for example: `data-global-init="func1 func2 func3"`
   const initFunc = el.getAttribute('data-global-init')!;
   const func = globalInitFuncs[initFunc];
   if (!func) throw new Error(`Global init function "${initFunc}" not found`);