chore: don't auto refresh the merge box when user has interacted with it (#38436)

Backport #38435

Otherwise, the user just isn't able to use "auto merge" form

web_src/js/features/repo-issue-pull.ts

@@ -46,6 +46,14 @@ export function initRepoPullMergeBox(el: HTMLElement) {
   const pullLink = el.getAttribute('data-pull-link');
   let timerId: number | null;
 
+  // The merge box has complex buttons & form, if the user has interacted with any element, don't refresh.
+  // Otherwise, the user won't be able to merge or schedule a merge (auto-merge) when the PR status is not ready.
+  let interacted = false;
+  const interactionEvents = ['focusin', 'mousedown', 'click', 'keydown', 'input'];
+  for (const event of interactionEvents) {
+    el.addEventListener(event, () => { interacted = true }, {capture: true});
+  }
+
   let reloadMergeBox: () => Promise<void>;
   const stopReloading = () => {
     if (!timerId) return;
@@ -53,7 +61,7 @@ export function initRepoPullMergeBox(el: HTMLElement) {
     timerId = null;
   };
   const startReloading = () => {
-    if (timerId) return;
+    if (timerId || interacted) return;
     setTimeout(reloadMergeBox, reloadingInterval);
   };
   const onVisibilityChange = () => {
@@ -64,6 +72,7 @@ export function initRepoPullMergeBox(el: HTMLElement) {
     }
   };
   reloadMergeBox = async () => {
+    if (interacted) return;
     const resp = await GET(`${pullLink}/merge_box`);
     stopReloading();
     if (!resp.ok) {